import { View, Text, CoverView } from '@tarojs/components'
import './MetricModalAdd.scss'
import { useTranslation } from 'react-i18next'
import { alphaToHex } from '@/utils/tools'
import SlidngScale from '@/components/input/SlidngScale'
import { useEffect, useState } from 'react'

export default function Component(props: { item: any, strTime: string, showPicker: Function, cancel: Function, confirm: Function }) {
    const [metricItem, setMetricItem] = useState(props.item)
    const [enable, setEnable] = useState(true)
    const [currentSel, setCurrentSel] = useState<any>({})
    // const [disableCode,setDisableCode] = useState(0)
    const { t } = useTranslation()



    useEffect(() => {
        setMetricItem(props.item)
    }, [props.item])

    return <View>
        <View className='modal_content'>
            <Text className='modal_title' style={{ color: (metricItem as any).theme_color }}>{(metricItem as any).name ? (metricItem as any).name : ''}</Text>
            <View style={{ position: 'relative' }}>
                {
                    (metricItem as any).schemas.map((item, index) => {
                        var obj = item;
                        const { unit_options, chosen_unit } = item;
                        if (unit_options && unit_options.length > 0) {
                            unit_options.map((temp, i) => {
                                if (temp.unit == chosen_unit) {
                                    obj = temp
                                    var tempMap = JSON.parse(JSON.stringify(currentSel))
                                    tempMap[index] = i;
                                }
                            })
                        }
                        return <View key={index} style={{position:'relative'}}>
                            {
                                (metricItem as any).schemas.length > 1 && <Text style={{
                                    textAlign: 'center', width: '100%', display: 'flex',
                                    justifyContent: 'center', color: (metricItem as any).theme_color,
                                    // opacity:item.code==disableCode?0.4:1
                                }}>{item.name}</Text>
                            }
                            {
                                unit_options && unit_options.length > 1 && <View style={{position:'absolute',right:20,}}>
                                    <Text style={{color:'#fff'}}>切换</Text>
                                </View>
                            }
                            <SlidngScale step={obj.step} min={obj.min} max={obj.max}
                                default_value={obj.default_value}
                                scale={obj.scale}
                                unit={obj.unit ? obj.unit : item.default_unit}
                                special={obj.special ?? null}
                                themeColor={(metricItem as any).theme_color}
                                changed={(e) => { 
                                    item.tempValue = e; 
                                    item.tempUnit = obj.unit ? obj.unit : item.default_unit
                                    debugger
                                }}
                                updateStatus={(isEnable) => {
                                    setEnable(isEnable)
                                }} />
                        </View>
                    })
                }
            </View>
            <View className="change_time_bg" >
                <View className="gray1 time_bg" onClick={() => { props.showPicker(metricItem) }}>
                    <Text className="time" >{props.strTime}</Text>
                </View>

            </View>
            <View className='modal_operate'>
                <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color + alphaToHex(0.4) }} onClick={() => props.cancel()}>
                    <Text className='modal_cancel_text' style={{ color: (metricItem as any).theme_color, fontWeight: 'bold' }}>{
                        t('feature.common.picker_cancel_btn')
                    }</Text>
                </View>
                <View className='btn_space' />
                <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color, opacity: enable ? 1 : 0.4 }} onClick={() => {
                    if (enable) {
                        props.confirm(metricItem)
                    }
                }}>
                    <Text className='modal_confirm_text' style={{ color: '#000', fontWeight: 'bold' }}>{
                        t('feature.common.picker_confirm_btn')
                    }</Text>
                </View>
            </View>
        </View>
    </View>
}