import React, { PureComponent, Children } from "react";
import { Select } from 'antd';
import { SelectProps } from 'antd/lib/select/index'
//修改setState返回promise
import { funToPromise_callbackType } from 'jad-tool'


const { Option } = Select
type optionsType = {
    name:string,
    value:string|Number,
    key?:string,
    parent?:optionsType,
    children?:optionsType[],
}



export class DoubleSelect extends PureComponent<{
    options: optionsType[],
    value?: [string|Number,string|Number],
    firstPlaceholder?: string,
    lastPlaceholder?: string,
    firstProps?:SelectProps,
    lastProps?:SelectProps,
    initCheck?:boolean,
    disabled?:boolean,
    onChange?: (value:[string|Number,string|Number])=>void,
}>{


    private setAsyncState = funToPromise_callbackType(this.setState.bind(this))

    state={
        firstActive:undefined,
        lastActive:undefined,
        firstOptions:[],
        lastOptions:[],
    }

    componentDidMount(){
        const { options=[] } = this.props
        if(options.length){
            this.initData()
        }
    }
    UNSAFE_componentWillReceiveProps(nextProps){
        const newOptions = nextProps.options || []
        const oldOptions = this.props.options || []
        const newValue = nextProps.value || false
        const oldValue = this.props.value || false
        //更新options
        if(newOptions.length !== oldOptions.length){
            setTimeout(()=>this.initData())
        }
        //恢复数据
        if(newValue || oldValue !== newValue){
            setTimeout(()=>this.onUpdateValue(newValue))
        }
    }


    initData(){
        const { initCheck,options } = this.props;
        const firstOptions = options;
        this.setState({
            firstOptions,
        })
        //初始化选择
        if(!initCheck) return;
        const [{value:firstActive=undefined ,children=[]}] = firstOptions;
        this.setAsyncState({
            firstOptions,
            firstActive
        })
        .then(()=>{
            if(!children.length) return;
            const lastOptions = children
            const [{value:lastActive=undefined}] = lastOptions;
            return this.setAsyncState({
                lastOptions,
                lastActive
            })
        })
        .finally(()=>{
            this.onEmitChange()
        })
    }


    onUpdateValue(value){
        const [ firstActive=[],lastActive=[] ] = value
        const { firstOptions } = this.state
        if(!firstOptions.length) return;
        const target = firstOptions.filter(item=>item.value === firstActive)
        if(!target.length) return
        const [{ children:lastOptions=[] }]= target
        this.setState({
            lastOptions,
            firstActive,
            lastActive
        })
    }
    onEmitChange(){
        const { onChange } = this.props
        if(!onChange) return
        const {firstActive,lastActive} = this.state
        return onChange([firstActive,lastActive])
    }


    onHandleFirstChange(value,option){
        const { firstOptions } = this.state
        const { lastProps={} } = this.props
        const { onChange=(value,option)=>null } = lastProps
        const firstActive = value;
        const target = firstOptions.filter(item=>item.value === value)
        this.setState({
            firstOptions,
            firstActive
        },()=>{
            this.onEmitChange()
        })
        onChange(value,option)
        //change last select
        const [{children=undefined}] = target
        if(!children || !children.length) return 
        const lastOptions = children
        const [{value:lastActive=undefined}] = lastOptions
        this.setState({
            lastOptions,
            lastActive
        })
    }
    onHandleLastChange(value,option){
        const { lastProps={} } = this.props
        const { onChange=(value,option)=>null } = lastProps
        const lastActive = value;
        this.setState({
            lastActive
        },()=>{
            this.onEmitChange()
        })
        onChange(value,option)
    }


    render() {
        const { 
            firstPlaceholder="请选择",
            lastPlaceholder="请选择" ,
            disabled=false,
            firstProps={},
            lastProps={}
        } = this.props;
        const {
            firstActive,
            lastActive,
            firstOptions,
            lastOptions
        } = this.state
        return (
            <div className='jad-doubleSelect-warp' >
                <Select
                    {...firstProps} 
                    value={firstActive} 
                    disabled={disabled}
                    onChange={this.onHandleFirstChange.bind(this)} 
                    placeholder={firstPlaceholder}
                >
                {
                   firstOptions.map(item=>{
                       return <Option key={item.value} value={item.value}>{item.name}</Option>
                   }) 
                }
                </Select>
                <span className='excision' ></span>
                <Select
                    {...firstProps}  
                    value={lastActive} 
                    disabled={disabled}
                    onChange={this.onHandleLastChange.bind(this)} 
                    placeholder={lastPlaceholder}
                >
                {
                   lastOptions.map(item=>{
                       return <Option key={item.value} value={item.value}>{item.name}</Option>
                   }) 
                }
                </Select>
            </div>
        );
    }

    
}