/**
*  选择项
*/

import React, { useMemo, useState } from 'react';
import { Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
import Picker from 'react-native-picker';
import { FormProps } from '../../kit';
import Icon from '../icon';

interface Props extends FormProps {

    /**
    *  样式
    */
    style?: ViewStyle,

    /**
    *  左侧文字
    */
    labelText?: string,
    /**
    *  左侧文字样式
    */
    labelTextStyle?: TextStyle,

	/**
	*  选中的数据 
	*/
    value?: any[];

    /**
    *  数据源,请参考 https://www.npmjs.com/package/react-native-picker
    */
    dataSource?: any[];

	/**
	*  显示文本的样式
	*/
    valueStyle?: TextStyle;

	/**
	*  占位符
	*/
    placeholder?: string;

    /**
    *  选择事件
    */
    onSelect?: (value?: any[]) => void;


}

export default function SelectItem(props: Readonly<Props>) {

    const [result, setResult] = useState(props.value)
    const [empty, setEmpty] = useState(false)


    useMemo(() => {
        setResult(props.value)
        setEmpty(false)
    }, [props.value])

    props.getFormRef && props.getFormRef((action) => {
        switch (action) {
            case 'data':
                return result;

            case 'enpty':
                setEmpty(true)
                break;
        }
    })


    // 点击事件 
    let selectClick = () => {
        if (props.dataSource && props.dataSource.length > 0) {

            // 如果有数据源 弹出pick选择器
            Picker.init({
                pickerTitleText: props.labelText || '选择',
                pickerCancelBtnText: '取消',
                pickerConfirmBtnText: '确认',
                pickerData: props.dataSource,
                selectedValue: [props.value],
                pickerConfirmBtnColor: [90, 169, 250, 1],
                pickerCancelBtnColor: [153, 153, 153, 1],
                pickerTitleColor: [51, 51, 51, 1],
                pickerToolBarBg: [255, 255, 255, 1],
                pickerBg: [255, 255, 255, 1],
                onPickerConfirm: data => {
                    props.onSelect && props.onSelect(data);
                    setResult(data)
                    setEmpty(false)
                },
                onPickerCancel: data => { },
                onPickerSelect: data => { }
            });
            Picker.show();
        } else {
            // 如果没有数据源
            props.onSelect && props.onSelect()
        }
    }


    return (
        <TouchableOpacity style={{ height: 55, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 15, ...props.style }} activeOpacity={1} onPress={selectClick}>
            <View style={{ width: 80, overflow: 'hidden', flexDirection: 'row', alignItems: 'center' }}>
                {
                    props.labelText && <Text style={{ color: 'rgba(0,0,0,0.6)', fontSize: 16, ...props.labelTextStyle }}>{props.labelText} <Text style={{ color: '#D5544F' }}>{props.require ? ' *' : ''}</Text></Text>
                }
            </View>
            <Text style={{ flex: 1, textAlign: 'right', fontSize: 16, marginRight: 10, color: empty ? '#D5544F' : (result ? '#000' : 'rgba(0,0,0,0.3)'), ...props.valueStyle }} >{result ? result.join(' ') : props.placeholder}</Text>

            <Icon iconCode={0xe649} style={{ fontSize: 10, color: 'rgba(0,0,0,0.3)' }} />
        </TouchableOpacity >
    )

}
