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 NewDurationPicker(props: { value?: any, onChange?: any, color?: string }) {
    const [items, setItems] = useState<any>([[0]])
    const [values, setValues] = useState<any>([0])
    const [loaded, setLoaded] = useState(false)
    useEffect(() => {
        var hours: any = []
        var tempValues: any = [props.value/5]

        var array:any = []
        for (var i=0;i<=12*3;i++){
            var count = i*5;
            var hour = Math.floor(count/60);
            var minute = count%60;
            var str = ''
            if (hour>0){
                str = hour+'小时'
            }
            if (minute>0){
                str += minute+'分钟'
            }
            if (hour==0 && minute==0){
                str = '0分钟'
            }
            array.push(str)
        }
        setItems([array])
        setValues(tempValues)
        setLoaded(true)
    }, [])

    function onPickerChange(e) {
        setValues(e.detail.value)
        if (props.onChange) {
            var list = e.detail.value
            props.onChange(list[0]*5)
        }
    }

    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}
        style={{ color: '#000', height: rpxToPx(340), width: rpxToPx(670) }}
        onChange={onPickerChange}
        indicatorClass="pick_sel_item"
        indicatorStyle={bgStyle}//""
        immediateChange={true}
        className="picker"

    >
        {
            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 >
}