import { View, Text, Image } from "@tarojs/components";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import { getLatestJournal, records } from "@/services/health";
import './History.scss'
import Calendar from "./calendar";
import { useDispatch, useSelector } from "react-redux";
import HistoryItem from "./HistoryItem";
import { rpxToPx } from "@/utils/tools";
import { jumpPage } from "../trackTimeDuration/hooks/Common";
import Taro, { useReady } from "@tarojs/taro";
import { getScenario, getThemeColor } from "./hooks/health_hooks";
import { TimeFormatter } from "@/utils/time_format";
import dayjs from "dayjs";
import { MainColorType } from "@/context/themes/color";
import { IconArrow, IconCellArrow } from "@/components/basic/Icons";
import NoRecord from "@/_health/components/no_record";
import ListFooter from "@/_health/components/list_footer";
import { useTranslation } from "react-i18next";
import { setActiveTip, setEatTip, setFirstActiveId, setFirstEatId } from "@/store/health";
import RightArrowRow from "@/_health/components/right_arrow_row";

let lastMode = ''
let myScrollTop = 0
export default forwardRef((props: { type?: string, fast_type?: string, updateDate?: any, refreshSuccess?: any }, ref) => {
    const [itemLayouts, setItemLayouts] = useState<any>([])
    const [itemHeights, setItemHeights] = useState<any>([])
    const [list, setList] = useState<any>([])
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    const [loaded, setLoaded] = useState(false)
    const health = useSelector((state: any) => state.health);
    const user = useSelector((state: any) => state.user);
    const [loading, setLoading] = useState(false)
    const [showEatArchive, setShowEatArchive] = useState(true)
    const [showActiveArchive, setShowActiveArchive] = useState(true)

    const [fastList, setFastList] = useState<any>([])
    const [eatList, setEatList] = useState<any>([])
    const [activeList, setActiveList] = useState<any>([])
    const [sleepList, setSleepList] = useState<any>([])

    const [pageTop, setPageTop] = useState(0)

    const dispatch = useDispatch()
    const { t } = useTranslation()

    useImperativeHandle(ref, () => ({
        onScroll: onScroll,
        refresh: refresh,
        more: more
    }))

    useEffect(() => {
        if (list.length > 0) {
            setTimeout(() => {
                measureItemLayouts()
            }, 300)
        }
    }, [list])


    useEffect(() => {
        if (!user.isLogin) {
            setList([])
        }
    }, [user.isLogin])

    global.refreshOtherHistory = () => {
        refresh()
    }

    useEffect(() => {
        // if (props.type == 'FAST,SLEEP' || (props.fast_type && props.fast_type == 'LF')) {
            
        // }
        // else {
        //     global.refreshHistory = () => {
        //         refresh()
        //         // refreshFast()
        //         // refreshSleep()
        //         // refreshEat()
        //         // refreshActive()
        //         refreshItem('FAST')
        //         refreshItem('SLEEP')
        //         refreshItem('EAT')
        //         refreshItem('ACTIVE')
        //     }
        // }
    }, [])

    useEffect(() => {
        if (props.type) {
            loadData(1)
        }
    }, [props.type])


    useEffect(() => {
        if (lastMode != health.mode) {
            lastMode = health.mode
            // loadData(1)
            setPage(1)
            switch (health.mode) {
                case 'DAY':
                case 'NIGHT':
                    debugger
                    setList([])
                    return
                case 'FAST':
                    if (fastList.length > 0) {
                        setList(fastList)
                        return;
                    }
                    break
                case 'EAT':
                    if (eatList.length > 0) {
                        setList(eatList)
                        return;
                    }
                    break
                case 'SLEEP':
                    if (sleepList.length > 0) {
                        setList(sleepList)
                        return;
                    }
                    break
                case 'ACTIVE':
                    if (activeList.length > 0) {
                        setList(activeList)
                        return;
                    }
                    break
            }
            loadData(1)
        }

    }, [health.mode])

    function measureItemLayouts() {
        const query = Taro.createSelectorQuery()
        list.forEach((item, index) => {
            query.select(`#history-${index}`).boundingClientRect()
        });
        query.exec((res) => {
            var layouts: any = []
            var heights: any = []
            res.forEach((rect, index) => {
                if (rect) {
                    layouts[index] = rect.top + myScrollTop
                    heights[index] = rect.height
                }
            });
            setItemLayouts(layouts)
            setItemHeights(heights)
        })
    }

    function onScroll(e) {
        // var top = e.detail.scrollTop
        // myScrollTop = top
        var top = e.detail.scrollTop - e.detail.deltaY
        myScrollTop = e.detail.scrollTop
        setPageTop(top)
        if (itemLayouts.length > 0) {
            var i = -1
            var date = ''
            list.forEach((item, index) => {
                if (top >= itemLayouts[index] - 50) {
                    i = index
                    date = dayjs(item.window_range.start_timestamp).format('YYYY年M月')
                }
            })
            if (props.updateDate) {
                props.updateDate({
                    show: i != -1,
                    date: date
                })
            }
        }
        else {
            if (props.updateDate) {
                props.updateDate({
                    show: false,
                    date: ''
                })
            }

        }
    }

    function refresh() {
        loadData(1)
        setPage(1)
    }

    function more() {
        if (loading) return;
        if (total == list.length) return;
        var index = page;
        index++;
        setPage(index)
        loadData(index)
    }

    function refreshItem(type) {
        setPage(1)
        var params: any = {
            window: type,
            limit: 10,
            page: 1
        }

        records(params).then(res => {
            var array = (res as any).data

            array.map(item => {
                var temps: any = []
                var lastType = ''
                var lastTextArray: any = []
                var lastImageArray: any = []
                item.events.map(event => {
                    event.moments && event.moments.map(moment => {
                        switch (moment.type) {
                            case 'TEXT':
                                {
                                    lastTextArray.push({
                                        title: moment.title,
                                        description: moment.description,
                                        event_id: event.id
                                    })
                                    if (lastType == 'PIC') {
                                        temps.push({
                                            type: 'PIC',
                                            data: JSON.parse(JSON.stringify(lastImageArray))
                                        })
                                        lastImageArray = []
                                    }
                                    lastType = 'TEXT'
                                }
                                break;
                            case 'PIC':
                                {
                                    lastImageArray.push(moment.media[0].url)
                                    if (lastType == 'TEXT') {
                                        temps.push({
                                            type: 'TEXT',
                                            data: JSON.parse(JSON.stringify(lastTextArray))
                                        })
                                        lastTextArray = []
                                    }
                                    lastType = 'PIC'
                                }
                                break;
                            case 'PIC_TEXT':
                                if (lastType == 'PIC') {
                                    temps.push({
                                        type: 'PIC',
                                        data: JSON.parse(JSON.stringify(lastImageArray))
                                    })
                                    lastImageArray = []
                                }
                                if (lastType == 'TEXT') {
                                    temps.push({
                                        type: 'TEXT',
                                        data: JSON.parse(JSON.stringify(lastTextArray))
                                    })
                                    lastTextArray = []
                                }
                                temps.push({
                                    type: 'PIC_TEXT',
                                    data: [
                                        {
                                            title: moment.title,
                                            description: moment.description,
                                            url: moment.media[0].url,
                                            event_id: event.id
                                        }
                                    ]
                                })
                                lastType = 'PIC_TEXT'
                                break;
                        }
                    })
                })

                if (lastType == 'PIC') {
                    temps.push({
                        type: 'PIC',
                        data: JSON.parse(JSON.stringify(lastImageArray))
                    })
                    lastImageArray = []
                }
                if (lastType == 'TEXT') {
                    temps.push({
                        type: 'TEXT',
                        data: JSON.parse(JSON.stringify(lastTextArray))
                    })
                    lastTextArray = []
                }

                item.dataArray = temps;
            })
            switch (type) {
                case 'FAST':
                    setFastList(array)
                    break
                case 'SLEEP':
                    setSleepList(array)
                    break
                case 'EAT':
                    setEatList(array)
                    break
                case 'ACTIVE':
                    setActiveList(array)
                    break
            }
        })
    }


    function loadData(index: number) {
        var params: any = {
            window: props.type ? props.type : health.mode,
            limit: 10,
            page: index
        }
        if (props.fast_type) {
            params.fast_type = props.fast_type
        }
        console.log(props.type, health.mode)
        debugger
        setPage(index)
        setLoading(true)
        records(params).then(res => {
            var array = (res as any).data

            array.map(item => {
                var temps: any = []
                var lastType = ''
                var lastTextArray: any = []
                var lastImageArray: any = []
                item.events.map(event => {
                    event.moments && event.moments.map(moment => {
                        switch (moment.type) {
                            case 'TEXT':
                                {
                                    lastTextArray.push({
                                        title: moment.title,
                                        description: moment.description,
                                        event_id: event.id
                                    })
                                    if (lastType == 'PIC') {
                                        temps.push({
                                            type: 'PIC',
                                            data: JSON.parse(JSON.stringify(lastImageArray))
                                        })
                                        lastImageArray = []
                                    }
                                    lastType = 'TEXT'
                                }
                                break;
                            case 'PIC':
                                {
                                    lastImageArray.push(moment.media[0].url)
                                    if (lastType == 'TEXT') {
                                        temps.push({
                                            type: 'TEXT',
                                            data: JSON.parse(JSON.stringify(lastTextArray))
                                        })
                                        lastTextArray = []
                                    }
                                    lastType = 'PIC'
                                }
                                break;
                            case 'PIC_TEXT':
                                if (lastType == 'PIC') {
                                    temps.push({
                                        type: 'PIC',
                                        data: JSON.parse(JSON.stringify(lastImageArray))
                                    })
                                    lastImageArray = []
                                }
                                if (lastType == 'TEXT') {
                                    temps.push({
                                        type: 'TEXT',
                                        data: JSON.parse(JSON.stringify(lastTextArray))
                                    })
                                    lastTextArray = []
                                }
                                temps.push({
                                    type: 'PIC_TEXT',
                                    data: [
                                        {
                                            title: moment.title,
                                            description: moment.description,
                                            url: moment.media[0].url,
                                            event_id: event.id
                                        }
                                    ]
                                })
                                lastType = 'PIC_TEXT'
                                break;
                        }
                    })
                })

                if (lastType == 'PIC') {
                    temps.push({
                        type: 'PIC',
                        data: JSON.parse(JSON.stringify(lastImageArray))
                    })
                    lastImageArray = []
                }
                if (lastType == 'TEXT') {
                    temps.push({
                        type: 'TEXT',
                        data: JSON.parse(JSON.stringify(lastTextArray))
                    })
                    lastTextArray = []
                }

                item.dataArray = temps;
            })


            setLoading(false)
            setLoaded(true)
            if (index == 1) {
                // console.log(props.type,health.mode)
                if (!props.type && array.length > 0) {
                    if (health.mode == 'EAT') {
                        setEatList(array)
                        // dispatch(setFirstEatId(array[0].window_id))
                        // if (health.first_eat_id.length > 0 && health.first_eat_id != array[0].window_id) {
                        //     dispatch(setEatTip(true))
                        // }
                    }
                    else if (health.mode == 'ACTIVE') {
                        setActiveList(array)
                        // dispatch(setFirstActiveId(array[0].window_id))
                        // if (health.first_active_id.length > 0 && health.first_active_id != array[0].window_id) {
                        //     dispatch(setActiveTip(true))
                        // }
                    }
                    else if (health.mode == 'FAST') {
                        setFastList(array)
                    }
                    else if (health.mode == 'SLEEP') {
                        setSleepList(array)
                    }
                }
                setList(array)
                setTotal((res as any).total)
                if (props.refreshSuccess) {
                    props.refreshSuccess()
                }
            }
            else {
                setList([...list, ...array])
            }

            // if ((res as any).data.length > 0) {
            //     setTimeout(() => {
            //         // var array:any = [];
            //         // (res as any).data.map((item,index)=>{
            //         //     array.push('#history_id_'+index)
            //         // })
            //         // var ids = array.join(',')
            //         // console.log(array)
            //         // console.log(ids)
            //         const query = Taro.createSelectorQuery();
            //         query.selectAll('#history_id_0').boundingClientRect((rect) => {
            //             console.log(rect)
            //         }).exec();
            //     }, 1000)
            // }

        }).catch(e => {
            setLoading(false)
        })
    }

    function historyMonth(index) {
        var showDate = false;
        var dateStr = ''
        if (index == 0) {
            var currentDate = global.language == 'en' ? dayjs(list[index].window_range.start_timestamp).format('YYYY') : dayjs(list[index].window_range.start_timestamp).format('YYYY年')
            var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')

            if (currentDate != now) {
                showDate = true
                dateStr = currentDate
            }


        }
        else {
            var currentDate = global.language == 'en' ? dayjs(list[index].window_range.start_timestamp).format('YYYY') : dayjs(list[index].window_range.start_timestamp).format('YYYY年')
            var now = global.language == 'en' ? dayjs(list[index - 1].window_range.start_timestamp).format('YYYY') : dayjs(list[index - 1].window_range.start_timestamp).format('YYYY年')
            if (currentDate != now) {
                showDate = true
                dateStr = currentDate
            }
        }
        if (showDate) {
            return <View className="history_year_month h42 bold" style={{marginBottom:rpxToPx(60)}}>{dateStr}</View>
        }
        return <View />
    }


    function hideLine(index) {
        var currentDate = dayjs(list[index].window_range.start_timestamp).format('YYYY年M月D日')
        if (list.length > index + 1) {
            var nextDate = dayjs(list[index + 1].window_range.start_timestamp).format('YYYY年M月D日')
            if (currentDate == nextDate) return true
        }
        return false
    }

    function archiveContent() {
        if (health.mode != 'EAT' && health.mode != 'ACTIVE') {
            return
        }

        if (health.mode == 'EAT') {
            if (!showEatArchive || !health.eatArchived || !health.eatArchived.archived) {
                return
            }
        }

        if (health.mode == 'ACTIVE') {
            if (!showActiveArchive || !health.activeArchived || !health.activeArchived.archived) {
                return
            }
        }

        return <View style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            paddingTop: rpxToPx(82),
            paddingBottom: rpxToPx(82),
            backgroundColor: '#fff',
            position: 'relative'
        }}>
            <View className="archived_bg" onClick={() => {
                jumpPage('/_health/pages/archive')
                setTimeout(() => {
                    health.mode == 'EAT' ? setShowEatArchive(false) : setShowActiveArchive(false)
                }, 1000)

            }}>
                <Text className="archived_text bold" style={{ color: getThemeColor(health.mode) }}>[{health.eatArchived.real_count}/{health.eatArchived.target_count} Meals] Archived {TimeFormatter.dateDescription(new Date(health.eatArchived.timestamp).getTime(), true, false)}</Text>
                {
                    health.eatArchived.images.map((item, index) => {
                        return <Image src={item} key={index} className="archived_img" mode="aspectFill" />
                    })
                }
                <IconArrow color={MainColorType.g02} width={rpxToPx(34)} />
            </View>
            <View className="border_footer_line" />
        </View>
    }

    if (!loaded || health.mode == 'DAY' || health.mode == 'NIGHT')
        return <View />

    if (!user.isLogin) return <View />

    function showTipF() {
        var showTip = false
        if (getScenario(health.windows, health.mode).status == 'OG') {
            if (health.mode == 'EAT') {
                showTip = !global.hideEatArchiveTip
            }
            else if (health.mode == 'ACTIVE') {
                showTip = !global.hideActiveArchiveTip
            }
        }
        return showTip
    }

    function newJournalTip() {
        if (!props.type) {
            var show = false

            if (health.mode == 'EAT' && health.eat_journal_tip) {
                show = true
            }
            else if (health.mode == 'ACTIVE' && health.active_journal_tip) {
                show = true
            }



            if (show) {
                return <View style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    paddingTop: rpxToPx(82),
                    paddingBottom: rpxToPx(82),
                    backgroundColor: '#fff',
                    position: 'relative'
                }}>
                    <View className="archived_bg" onClick={() => {
                        // jumpPage('/_health/pages/archive')
                        var data = list[0]
                        jumpPage(`/_health/pages/timeline_detail?window_id=${data.window_id}&type=recent&isfastsleep=0&timestamp=${data.publish.timestamp}`)

                        getLatestJournal(false, {
                            id: health.mode == 'EAT' ? global.eatTipId : global.activeTipId,
                            user_confirmed: true
                        }).then(res => {

                        })
                        setTimeout(() => {
                            if (health.mode == 'EAT') {
                                dispatch(setEatTip(false))
                            }
                            else {
                                dispatch(setActiveTip(false))
                            }
                        }, 1000)

                    }}>
                        <Text className="archived_text bold" style={{ color: getThemeColor(health.mode) }}>{t('health.new_journal_created')}</Text>
                        {/* {
                            health.eatArchived.images.map((item, index) => {
                                return <Image src={item} key={index} className="archived_img" mode="aspectFill" />
                            })
                        } */}
                        <IconArrow color={MainColorType.g02} width={rpxToPx(34)} />
                    </View>
                    <View className="border_footer_line" />
                </View>
                // return <View className="h28 bold" 
                // onClick={()=>{
                //     if (health.mode == 'EAT'){
                //         dispatch(setEatTip(false))
                //     }
                //     else {
                //         dispatch(setActiveTip(false))
                //     }
                // }}
                // style={{
                //     width:rpxToPx(750),
                //     height:rpxToPx(156),
                //     display:'flex',
                //     alignItems:'center',
                //     justifyContent:'center',
                //     backgroundColor:'#fff',
                //     color:getThemeColor(health.mode),

                // }}>
                //     New Journal Created {'>'}
                // </View>
            }
        }
        return <View />
    }

    return <View style={{ width: rpxToPx(750), marginTop: rpxToPx(60) }}>

        {
            (list.length >= 0 || health.mode == 'EAT') && <View className="new_header_bg">
                <Text className="h50 bold">{t('health.recents')}</Text>
                {
                    false && (health.mode == 'EAT' || health.mode == 'ACTIVE') && <View onClick={() => {
                        jumpPage('/pages/account/Journal?type=' + health.mode + `&show_tip=${showTipF() ? '1' : '0'}`)
                        setTimeout(() => {
                            health.mode == 'EAT' ? setShowEatArchive(false) : setShowActiveArchive(false)
                        }, 1000)
                    }} className="archive_bg" style={{ position: 'relative' }}>
                        <Image className="archive_bg" src={require('@assets/_health/journal.png')} />
                        {/* {
                            ((health.mode == 'EAT' && health.eatArchivedTotal > 0) ||
                                (health.mode == 'ACTIVE' && health.activeArchivedTotal > 0)) && <View style={{
                                    width: rpxToPx(12),
                                    height: rpxToPx(12),
                                    borderRadius: rpxToPx(6),
                                    backgroundColor: 'red',
                                    position: 'absolute',
                                    right: -6,
                                    top: 0
                                }} />
                        } */}

                    </View>
                }
            </View>
        }
        {/* {
            archiveContent()
        } */}
        {/* {
            newJournalTip()
        } */}
        {/* {
            (health.mode == 'EAT' || health.mode == 'ACTIVE') && <RightArrowRow title={health.mode == 'ACTIVE' ? t('health.title_active_journal') : t('health.title_food_journal')}
                onClick={() => {

                    var showBadge = (health.mode == 'EAT' && health.eat_journal_tip) ||
                        (health.mode == 'ACTIVE' && health.active_journal_tip)
                    jumpPage('/pages/account/Journal?type=' + health.mode + `&show_tip=${showTipF() && false ? '1' : '0'}&show_badge=${showBadge ? 1 : 0}`)
                }} />
        } */}
        {
            list.length == 0 && <NoRecord />
        }
        {
            list.length > 0 && <View style={{ minHeight: rpxToPx(464), backgroundColor: '#fff',paddingTop:rpxToPx(60) }}>
                {
                    list.map((item, index) => {
                        if (itemLayouts.length >= index + 1 && index>5) {
                            if (Math.abs(itemLayouts[index] - pageTop) > 2500) {
                                return <View style={{ height: itemHeights[index] }} id={`history-${index}`} key={index}>
                                    {
                                        historyMonth(index)
                                    }
                                </View>
                            }
                        }
                        return <View id={`history-${index}`} key={index}>
                            {
                                historyMonth(index)
                            }
                            <HistoryItem
                                data={item}
                                preData={index > 0 ? list[index - 1] : null}
                                index={index}
                                mode={props.type ?? health.mode}
                                fast_type={props.fast_type}
                                type={props.type}
                                hideLine={hideLine(index)}
                                onClick={() => {

                                }} />

                        </View>
                    })
                }
            </View>
        }


        {/* <View style={{ height: rpxToPx(40), flexShrink: 0, backgroundColor: '#fff' }} /> */}
        <ListFooter noMore={(list.length > 0) && (total == list.length)} loading={loading}/>
    </View>
})