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

// export default function Component(props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }) {
const Component = forwardRef((props: {
    value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function,
    themeColor?: string, title?: string
}, 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)
        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' catchMove>
        <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
        <PickerView value={v}
            onChange={onPickerChange}
            indicatorStyle='height: 50px;'
            immediateChange={true}
            className="picker"
            maskClass="picker-mask"
        >
            {
                props.items.map(item => {
                    return <PickerViewColumn>
                        {item.map(obj => {
                            return (
                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</View>
                            );
                        })}
                    </PickerViewColumn>
                })
            }

        </PickerView >
        <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 }}>{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' }}>{t('feature.common.picker_confirm_btn')}</Text>
            </View>


        </View>
    </View>
})

export default Component;