/**
*  时间 选择项
*/

import React, { useMemo, useState } from 'react';
import { Text, TextStyle, View, ViewStyle } from 'react-native';
import DatePicker from 'react-native-datepicker';
import defaultStyle from '../../configs/defaultStyle';
import { FormProps } from '../../kit';
import Icon from '../icon';



interface Props extends FormProps {

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

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

	/**
	*  选中的数据 
	*/
    value?: string;

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

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

    /**
    *  模式 date:年月日  dateTime:月日时分 time:时分
    */
    mode: 'date' | 'datetime' | 'time'

    /**
    *  最小可选
    */
    minDate?: string

    /**
    *  最大可选时间
    */
    maxDate?: string

    /**
    *  时间格式 YYY-MM-DD 
    */
    format?: string

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


}

export default function DatePickerItem(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 = (dateStr: string, date: Date) => {
        setResult(dateStr)
        setEmpty(false)
        props.onSelect && props.onSelect(dateStr)
    }


    return (
        <View style={{ height: 55, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 15, ...props.style }}>
            <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 }} numberOfLines={1}>{props.labelText} <Text style={{ color: '#D5544F' }}>{props.require ? ' *' : ''}</Text></Text>
                }
            </View>
            <DatePicker
                placeholder='请选择'
                mode={props.mode}
                date={result}
                format={props.format}
                minDate={props.minDate}
                maxDate={props.maxDate}
                style={{ flex: 1 }}
                customStyles={{
                    dateInput: { borderWidth: 0, alignItems: 'flex-end', marginRight: 10 },
                    dateText: { color: empty ? '#D5544F' : '#000', fontSize: 16, ...props.labelTextStyle },
                    placeholderText: { fontSize: 16, color: empty ? '#D5544F' : 'rgba(0,0,0,0.3)' },
                    btnTextCancel: { color: '#999', fontSize: 14 },
                    btnTextConfirm: { color: defaultStyle.color.mainColor, fontSize: 14 }
                }}
                showIcon={false}
                onDateChange={selectClick} />

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

}
