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, getFoodTags } from "@/services/foodJournal"
import { usePullDownRefresh, useReachBottom, useReady } from "@tarojs/taro"
import Taro from "@tarojs/taro"
import { useDispatch, useSelector } from "react-redux"
import { setMealTags } from "@/store/common"
import { getInfoSuccess } from "@/store/user"
import './FoodJournal.scss'
import { rpxToPx } from "@/utils/tools"
import NoData from "@/components/view/NoData"

export default function Component() {
    const { t } = useTranslation()
    const dispatch = useDispatch();
    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)
    const [showError,setShowError] = useState(false)

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

    useReady(async () => {
        const userData = await getStorage('userData');
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
            setTimeout(() => {
                getList(1)

            }, 200)

        }
    })



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

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

    function getTags() {
        getFoodTags({
            type: 'meal_tag'
        }).then(res => {
            dispatch(setMealTags((res as any).data))
        }).catch(e => {

        })
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }

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


    function getList(index) {
        getFoodJournals({
            page: index,
            limit: 10
        }).then(res => {
            Taro.stopPullDownRefresh()
            setShowError(false)
            setLoaded(true)
            setTotal((res as any).total)
            var array;
            if (index == 1) {
                array = (res as any).data
                // setList((res as any).data)
            } else {
                array = list.concat((res as any).data)
                // setList(list.concat((res as any).data))
            }
            var selDate = ''
            for (var i =0;i<array.length;i++){
                var obj = array[i]
                if (obj.start.date!=selDate){
                    obj.showDate = true
                    selDate = obj.start.date
                }
            }
            setList(array)
            setIsLoading(false)
        }).catch(e => {
            Taro.stopPullDownRefresh()
            if (pageIndex==1){
                setShowError(true)
            }
        })
    }

    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')} showAddBtn={false}>
        </TitleView>
    }
    function detail() {
        return <View style={{ position: 'relative', marginTop: rpxToPx(52) }}>
            {
                <FoodConsole addItem={addItem} />
            }
            {
                user.isLogin && list && <FoodTimeline array={list} />
            }
            {
                user.isLogin && showError && <NoData refresh={() => { getList(1) }} />
            }
            <View style={{ height: 60 }} />
            {
                user.isLogin && <View className="center_line" style={{ height: list.length == 0 ? rpxToPx(304) : rpxToPx(364 * (list.length + 1) - 120) }} />
            }
        </View>
    }

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