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, getFoodScales, getFoodTags } from "@/services/foodJournal"
import { usePullDownRefresh, useReachBottom, useReady } from "@tarojs/taro"
import Taro from "@tarojs/taro"
import { useDispatch, useSelector } from "react-redux"
import { setFoodScales, 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(() => {
        getConfigs()
        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)
        }
    })

    //0点刷新一下数据
    useEffect(() => {
        const now = new Date();
        const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
        const timeUntilMidnight = nextMidnight.getTime() - now.getTime();

        setTimeout(() => {
            refreshData()
        }, timeUntilMidnight);
    }, [])



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

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

    //0点刷新一下数据
    function refreshData() {
        list.map(item => {
            item.showDate = false
        })

        var selDate = ''
        for (var i = 0; i < list.length; i++) {
            var obj = list[i]
            if (obj.start.date != selDate) {
                obj.showDate = true
                selDate = obj.start.date
            }
        }

        setList(list)
        setCount(count + 1)
    }

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

        })

        getFoodScales({
            type: 'hunger_fullness'
        }).then(res => {
            dispatch(setFoodScales((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
        getList(page)
    }


    function getList(index) {
        setPageIndex(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)
        temps.map(item => {
            item.showDate = false
        })

        var selDate = ''
        for (var i = 0; i < temps.length; i++) {
            var obj = temps[i]
            if (obj.start.date != selDate) {
                obj.showDate = true
                selDate = obj.start.date
            }
        }

        setList(temps)
    }

    function headerView() {
        return <TitleView title={t('page.food.title')} showAddBtn={false}>
        </TitleView>
    }
    function detail() {
        var tempFirst = list.length > 0 ? list[0] : null
        if (!user.isLogin) {
            tempFirst = null
        }
        return <View style={{ position: 'relative', marginTop: rpxToPx(52) }}>
            {
                (loaded || !user.isLogin) && <FoodConsole addItem={addItem} firstItem={tempFirst} />
            }
            {
                user.isLogin && list && <FoodTimeline array={list} refresh={() => refreshData()} forceRefresh={() => getList(1)} />
            }
            {
                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>
}