import { rpxToPx } from "@/utils/tools";
import { PickerView, PickerViewColumn, Text, View } from "@tarojs/components";
import { useEffect, useState } from "react";
import './new_timepicker.scss'
import dayjs from "dayjs";
import { MainColorType } from "@/context/themes/color";

export default function NewTimePicker(props: { time?: string, onChange?: any, color?: string }) {
    const [items, setItems] = useState<any>([[0], [0]])
    const [values, setValues] = useState<any>([0, 0])
    const [loaded, setLoaded] = useState(false)
    useEffect(() => {
        var hours: any = []
        var tempValues: any = [0, 0]
        var str = props.time ? props.time : dayjs().format('HH:mm')
        var tempHour = str.split(':')[0]
        var tempMinute = str.split(':')[1]
        for (var i = 0; i <= 23; i++) {
            var str = (i + '').padStart(2, '0')
            if (str == tempHour) {
                tempValues[0] = i
            }
            hours.push(str)
        }
        var minutes: any = []
        for (var i = 0; i <= 59; i++) {
            var str = (i + '').padStart(2, '0')
            if (str == tempMinute) {
                tempValues[1] = i
            }
            minutes.push(str)
        }
        setItems([hours, minutes])
        setValues(tempValues)
        setLoaded(true)
    }, [])

    useEffect(() => {
        var hours: any = []
        var tempValues: any = [0, 0]
        var str = props.time ? props.time : dayjs().format('HH:mm')
        var tempHour = str.split(':')[0]
        var tempMinute = str.split(':')[1]
        for (var i = 0; i <= 23; i++) {
            var str = (i + '').padStart(2, '0')
            if (str == tempHour) {
                tempValues[0] = i
            }
            hours.push(str)
        }
        var minutes: any = []
        for (var i = 0; i <= 59; i++) {
            var str = (i + '').padStart(2, '0')
            if (str == tempMinute) {
                tempValues[1] = i
            }
            minutes.push(str)
        }
        setValues(tempValues)
    }, [props.time])

    function onPickerChange(e) {
        setValues(e.detail.value)
        if (props.onChange) {
            var list = e.detail.value
            props.onChange((list[0] + '').padStart(2, '0') + ':' + (list[1] + '').padStart(2, '0'))
        }
    }

    function getColor(i, j) {
        if (i == 0 && j == values[0]) {
            return true
        }
        if (i == 1 && j == values[1]) {
            return true
        }
        return false
    }
    if (!loaded) return <View />

    const bgStyle = `background-color: ${props.color}1A !important;`
    return <PickerView
        value={values}
        // itemStyle={{ color: '#000' }}
        style={{ color: '#000', height: rpxToPx(340), width: rpxToPx(670) }}
        onChange={onPickerChange}
        indicatorClass="pick_sel_item"
        indicatorStyle={bgStyle}//""
        immediateChange={true}
        className="picker"
    // maskClass={props.hideTitle?"picker-mask-small":"picker-mask"}
    >
        {
            items.map((item, index) => {
                return <PickerViewColumn key={index}>
                    {item.map((obj, j) => {
                        return (
                            <Text key={j} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: getColor(index, j) ? props.color ?? MainColorType.fast : '#000' }}>{obj}</Text>
                        );
                    })}
                </PickerViewColumn>
            })
        }

    </PickerView >
}