import { useTranslation } from "react-i18next"
import TitleView from "../trackTimeDuration/components/TitleView"
import { View } from "@tarojs/components"
import FoodConsole from "./FoodConsole"
import FoodTimeline from "./FoodTimeline"
import Layout from "@/components/layout/layout"
import { NaviBarTitleShowType, TemplateType } from "@/utils/types"
import { useEffect, useState } from "react"
import { getFoodJournals } from "@/services/foodJournal"
import { usePullDownRefresh, useReachBottom } from "@tarojs/taro"
import Taro from "@tarojs/taro"
import { useSelector } from "react-redux"

export default function Component() {
    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const [pageIndex, setPageIndex] = useState(1)
    const [list, setList] = useState<any[]>([])
    const [count, setCount] = useState(0)
    const [total, setTotal] = useState(0)
    const [isLoading, setIsLoading] = useState(false)
    const [loaded, setLoaded] = useState(false)

    useEffect(() => {
        if (user.isLogin) {
            getList(1)
        }
    }, [user.isLogin])

    usePullDownRefresh(() => {
        getList(1)
    })

    useReachBottom(() => {
        console.log('bottom')
        more()
        // setPageIndex(pageIndex+1)
        // getHistory()
    })

    function more() {
        if (total <= list.length || isLoading) {
            return;
        }
        setIsLoading(true)
        var page = pageIndex + 1
        setPageIndex(page)
    }


    function getList(index) {
        getFoodJournals({
            page: index,
            limit: 10
        }).then(res => {
            Taro.stopPullDownRefresh()

            setLoaded(true)
            setTotal((res as any).total)
            if (index == 1) {
                setList((res as any).data)
            } else {
                setList(list.concat((res as any).data))
            }
            setIsLoading(false)
        }).catch(e => {
            Taro.stopPullDownRefresh()
        })
    }

    function addItem(item) {
        setCount(count + 1)
        var temps: any = list
        if (!temps) {
            temps = []
        }
        temps.unshift(item)
        setList(temps)
    }

    function headerView() {
        return <TitleView title={t('page.food.title')} subTitle="hello world" showAddBtn={false}>
        </TitleView>
    }
    function detail() {
        return <View>
            {
                <FoodConsole addItem={addItem} />
            }
            {
                user.isLogin && list && <FoodTimeline array={list} />
            }
            <View style={{height:60}}/>
        </View>
    }

    return <View>
        <Layout children={detail()}
            title={t('page.food.title')}
            type={TemplateType.customHeader}
            header={headerView()}
            refresh={() => { }}
            triggered={false}
            titleShowStyle={NaviBarTitleShowType.scrollToShow}
        />
    </View>
}