import { PageContainer, View } from "@tarojs/components"
import { useEffect, useRef, useState } from "react"
import { durationDatas, durationIndex, getColor, getDurationTitle } from "../hooks/Console"
import { useSelector } from "react-redux"
import Taro from "@tarojs/taro"
import { useTranslation } from "react-i18next"
import PickerViews from "@/components/input/PickerViews"
import { ColorType } from "@/context/themes/color"
import { updateRecord } from "@/services/trackTimeDuration"
import Modal from "@/components/layout/Modal.weapp";

export default function DurationPicker(props: { record: any }) {
    const [showDurationPicker, setShowDurationPicker] = useState(false)
    const [fastPickerValue, setFastPickerValue] = useState([0, 0])
    const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
    const [showEditPicker, setShowEditPicker] = useState(false)
    const [isFast, setIsFast] = useState(true)
    const durationPickerRef = useRef(null)
    const { t } = useTranslation()

    const common = useSelector((state: any) => state.common);

    useEffect(() => {
        getStateDetail()
    }, [props.record])

    function getStateDetail() {
        var current_record = props.record
        if (current_record.fast)
            setFastPickerValue(durationIndex(current_record.fast.target_start_time, current_record.fast.target_end_time, common))
        if (current_record.sleep)
            setSleepPickerValue(durationIndex(current_record.sleep.target_start_time, current_record.sleep.target_end_time, common))
    }

    global.showFastPicker = () => {
        setFastDuration()
    }

    global.showSleepPicker = () => {
        setSleepDuration()
    }

    function setFastDuration() {
        setIsFast(true)
        if (props.record.status == 'WAIT_FOR_START') {
            setShowDurationPicker(true)
        }
        else {
            setShowEditPicker(true)
        }
    }

    function setSleepDuration() {
        setIsFast(false)
        if (props.record.status == 'WAIT_FOR_START') {
            Taro.showToast({
                title: t('feature.track_time_duration.common.start_fasting_first'),
                icon: 'none'
            })
            return;
        }
        if (props.record.status == 'WAIT_FOR_START' || props.record.status == 'ONGOING1') {
            setShowDurationPicker(true)
        }
        else {
            setShowEditPicker(true)
        }
    }

    function durationPickerContent() {
        var color = getColor(props.record)
        var title = getDurationTitle(props.record, t)
        return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>


            <PickerViews ref={durationPickerRef}
                onChange={durationChange}
                items={durationDatas(common)}
                value={isFast ? fastPickerValue : sleepPickerValue}
                themeColor={color}
                title={title}
                showBtns={true}
                onCancel={() => {
                    setShowDurationPicker(false)
                }} />
        </View>
    }

    function editPickerContent() {
        return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
            <PickerViews ref={durationPickerRef}
                onChange={durationChange}
                items={durationDatas(common)}
                value={isFast ? fastPickerValue : sleepPickerValue}
                themeColor={isFast ? ColorType.fast : ColorType.sleep}
                title={isFast ? t('feature.track_time_duration.action_sheet.edit_fasting_goal') :
                    t('feature.track_time_duration.action_sheet.edit_sleeping_goal')}
                showBtns={true}
                onCancel={() => {
                    setShowEditPicker(false)
                }} />
        </View>
    }

    function durationChange(e) {
        // debugger
        var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step
        // var count = (e[0] + 1) * 60 + e[1] * 5
        if (showDurationPicker) {
            global.changeTargetDuration(count, isFast)
        }
        else {
            var params: any = {}
            if (isFast) {
                params = {
                    fast: {
                        target_duration: count * 60 * 1000
                    }
                }
            }
            else {
                params = {
                    sleep: {
                        target_duration: count * 60 * 1000
                    }
                }
            }
            updateRecord({
                ...params
            }, props.record.id).then(res => {
                global.indexPageRefresh()
            }).catch(e => {

            })
        }
        setShowDurationPicker(false)
        setShowEditPicker(false)
    }

    function modalContent() {
        if (showDurationPicker || showEditPicker) {
            return <Modal
                testInfo={null}
                dismiss={() => {
                    setShowDurationPicker(false)
                    setShowEditPicker(false)
                }}
                confirm={() => { }}>
                {
                    showDurationPicker ? durationPickerContent() : editPickerContent()
                }
            </Modal>
        }
        return <View />
    }


    return <View style={{ width: 0, height: 0 }}>
        {
            modalContent()
        }
    </View>
}