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 [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) => {
                        return <View key={index}>
                            {
                                (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>
                            }
                            <SlidngScale step={item.step} min={item.min} max={item.max}
                                default_value={item.default_value}
                                scale={item.scale}
                                unit={item.default_unit}
                                themeColor={(metricItem as any).theme_color}
                                changed={(e) => { item.tempValue = e }}
                                updateStatus={(isEnable) => {
                                    setEnable(isEnable)
                                    // if (isEnable){
                                    //     setDisableCode(0)
                                    // }
                                    // else {
                                    //     setDisableCode(item.code)
                                    //     console.log(item.code)
                                    // }
                                }} />
                        </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>
}