import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
import './PickerViews.scss'
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import { useTranslation } from "react-i18next";
import { rpxToPx } from "@/utils/tools";

// export default function Component(props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }) {

let detailValue
const Component = forwardRef((props: {
    value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function,
    themeColor?: string, title?: string,
    hideTitle?: boolean
}, ref) => {
    const { t } = useTranslation()
    const [v, setV] = useState(props.value)
    var color = props.themeColor ? props.themeColor : '#ff0000'
    var alpha = alphaToHex(0.4)

    useEffect(() => {
        setV(props.value)
    }, [props.value])

    function onPickerChange(e) {
        setV(e.detail.value)
        // detailValue = e.detail.value
        if (props.showBtns) {
            return;
        }
        props.onChange(e.detail.value)
    }

    function alphaToHex(alpha) {
        var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
        var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
        if (hexValue.length === 1) {
            hexValue = "0" + hexValue; // 如果十六进制字符串只有一位，补零
        }
        return hexValue;
    }

    function confirm(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        props.onChange(v)
    }

    useImperativeHandle(ref, () => ({
        getConfirmData: confirm
    }));

    return <View className='modal_content' style={{paddingBottom:props.showBtns?rpxToPx(120):0}} catchMove>
        {
            !props.hideTitle && <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
        }

        <PickerView value={v}
            // color='#fff'
            itemStyle={{ color: '#fff' }}
            style={{ color: '#fff' }}
            onChange={onPickerChange}
            indicatorStyle='height: 40px;'
            immediateChange={true}
            className="picker"
            maskClass="picker-mask"
        >
            {
                props.items.map((item, index) => {
                    return <PickerViewColumn key={index}>
                        {item.map((obj, j) => {
                            return (
                                <Text key={j} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</Text>
                            );
                        })}
                    </PickerViewColumn>
                })
            }

        </PickerView >
        {
            props.showBtns && <View className='modal_operate'>
                <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={(e) => {
                    if (process.env.TARO_ENV == 'weapp') {
                        e.stopPropagation()
                    }; props.onCancel!()
                }}>
                    <Text className='modal_cancel_text' style={{ color: color, fontWeight: 'bold' }}>{t('feature.common.picker_cancel_btn')}</Text>
                </View>
                <View className='btn_space' />
                <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
                    <Text className='modal_confirm_text' style={{ color: '#000', fontWeight: 'bold' }}>{t('feature.common.picker_confirm_btn')}</Text>
                </View>


            </View>
        }

    </View>
})

export default Component;