import { ScrollView, View, Text } from "@tarojs/components";
import './recents.scss'
import Layout from "@/components/layout/layout";
import { useTranslation } from "react-i18next";
import NewHeader, { NewHeaderType } from "../components/new_header";
import { rpxToPx } from "@/utils/tools";
import NewButton, { NewButtonType } from "../base/new_button";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { MainColorType } from "@/context/themes/color";
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import { useEffect, useRef, useState } from "react";
import MainHistory from "@/features/health/MainHistory";
import Taro from "@tarojs/taro";
import { checkSummaries } from "@/services/health";
import StickyDateList from "../components/sticky_date_list";

export default function Recents() {
    const [mode, setMode] = useState('EAT')
    const { t } = useTranslation()
    const historyRef = useRef()
    const [list, setList] = useState<any>([])
    const [isPulling,setIsPulling] = useState(false)

    useEffect(() => {
        getData()
    }, [])

    function getData() {
        checkSummaries().then(res => {
            setList((res as any).windows)
            setMode((res as any).windows[0].window)
        })
    }

    if (list.length == 0) {
        return <View />
    }


    function detail() {
        return <StickyDateList
            isPulling={isPulling}
            showDate={false}
            date={''}
            onRefresherRefresh={() => {
                global.refreshWindow()
                setIsPulling(true)
                if (global.refreshHistory) {
                    global.refreshHistory()
                }
            }}
            loadMore={() => {
                if (historyRef) {
                    (historyRef.current as any).more()
                }
            }}
            onScroll={e => {
                // props.onScroll(e)
                // if (showDate && e.detail.scrollTop > 100) {
                //     dispatch(setTitle(t('health.recents')))
                // }
                // else if (e.detail.scrollTop > 100) {
                //     dispatch(setTitle(t('health.today')))
                // }
                // else {
                //     dispatch(setTitle(''))
                // }
                // if (historyRef2) {
                //     (historyRef2.current as any).onScroll(e)
                // }
                if (e.detail.scrollTop > 100){
                    Taro.setNavigationBarTitle({
                        title:t('health.check_ins')
                    })
                }
                else {
                    Taro.setNavigationBarTitle({
                        title:''
                    })
                }
            }}
        ><View style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
                <NewHeader type={NewHeaderType.left} title={t('health.check_ins')} />
                <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(72) }} scrollX enableFlex showScrollbar={false}>
                    <View style={{ display: 'flex', flexDirection: 'row', flexShrink: 0 }}>
                        <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
                        {
                            list.map((item, index) => {
                                return <NewButton key={index} type={NewButtonType.img} onClick={() => setMode(item.window)}>
                                    <View className="streak_toolbar_btn"
                                        style={{ backgroundColor: mode == item.window ? getThemeColor(item.window) + '1A' : 'transparent' }}
                                    >
                                        <Text className={mode == item.window ? 'bold h30' : 'h30'}
                                            style={{ color: mode == item.window ? getThemeColor(item.window) : MainColorType.g01, marginRight: 5 }}>{item.title}</Text>
                                        <Text className={mode == item.window ? 'bold h20' : 'h20'}
                                            style={{ color: mode == item.window ? getThemeColor(item.window) : MainColorType.g01 }}>{item.log_count}</Text>
                                    </View>
                                </NewButton>
                            })
                        }
                        <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
                    </View>
                </ScrollView>
                <View style={{ height: rpxToPx(36), flexShrink: 0 }} />
                <MainHistory ref={historyRef} type={mode} updateDate={(e) => {
                    // setShowDate(e.show)
                    // setDate(e.date)
                }} />
            </View>
        </StickyDateList>
    }
    return detail()

    // return <Layout children={detail()}
    //     title={t('health.check_ins')}
    //     type={TemplateType.customHeader}
    //     titleShowStyle={NaviBarTitleShowType.scrollToShow}
    // />
}