import React, { Component } from 'react';
import { PageComponent,} from '../../../types/index';
import classname from 'classnames'
import * as Tools from 'jad-tool'
import { Checkbox,Icon,Select, Row,Col } from 'antd'
import { SelectProps } from 'antd/lib/select/index'


import { Cascader,initOptionsType,cascaderOptionsItemType } from '../util'


const ROOT_SHOW_OPTIONS = 0


export class CascaderTreeSelect extends Component <PageComponent<{
    options?: initOptionsType[]
    onCreateInitOptions?:()=>cascaderOptionsItemType[]
    propValue?: string
    propName?: string
    selectProps?: SelectProps,
    value?: string[],
    disabled?: boolean,
    onChange?: (selectMap) => void
}>> {
   

    cascader = null
    state = {
        selectMap:[],
        showOptions:[],
        showMap:{},
        quickOptions:null,
    }

   
    componentDidMount(){
        this.init()
    }
    UNSAFE_componentWillReceiveProps(nextProps){
        if(this.props.options && !this.props.options.length && nextProps.options.length){
            setTimeout(()=>this.init())
        }
        if(!this.props.value && nextProps.value){
            setTimeout(()=>this.resetSelect())
        }
    }
    init(){
        const { options=[],onCreateInitOptions} = this.props
        this.cascader = new Cascader({
            initOptions: options,
            onCreateInitOptions
        })
        this.initShowOptions()
    }
    initShowOptions(){
        var showOptions = []
        showOptions.push(this.cascader.getCollectData())
        this.setState({
            showOptions
        })
    }  
    resetSelect(){
        const { value } = this.props
        var { showOptions=[] } = this.state
        const selectMap = this.cascader.resetOptions(value)
        showOptions[0] = this.cascader.getCollectData()
        this.setState({
            selectMap,
            showOptions
        },()=>{
            this.resetQuickStatus()
        })
    }
    resetQuickStatus(){
        let { propValue='value' } = this.props
        let { quickOptions,selectMap } = this.state
        if(!quickOptions || Tools.isEmptyArray(quickOptions)){
            return null;
        }
        var selectMapBuff = this.cascader.coolect(selectMap)
        quickOptions = quickOptions.map(item=>{
            let checked = item.options.every(e=>selectMapBuff.some(i=>i[propValue]===e[propValue]))
            let indeterminate = checked?false:(
                item.options.some(e=>selectMapBuff.some(i=>i[propValue]===e[propValue]))?true:false
            );
            return{
                ...item,
                checked,
                indeterminate,
            }
        })
        this.setState({
            quickOptions
        })
    }



    onEmitChange(){
        const { selectMap} = this.state
        const { onChange,propValue='value'  } = this.props;
        onChange(selectMap.map(e=>e[propValue]))
    }
    onSelect(checked,record){
        var { showOptions,showMap } = this.state
        const selectMap = this.cascader.activeSelect(checked,record)
        //从根节点更新数据
        showOptions[ROOT_SHOW_OPTIONS] = this.cascader.getCollectData()
        //显示选中的子集
        if(record.children && record.children.length){
            showOptions[record.level+1] =  this.cascader.getCollectData(record)
            showMap[record.level] = record
        }
        this.setState({
            showMap,
            selectMap,
            showOptions,
        },()=>{
            this.onEmitChange()
        })
    }
    onAddShowOptions(item,index,options){
        var { showOptions,showMap } = this.state
        if(!showOptions[index]){
            showOptions.splice(index,0,options) 
        }else{
            showOptions.splice(index,showOptions.length,options)
        }
        showMap[item.level] = item
        this.setState({
            showOptions,
            showMap
        })
    }
    onClear(record){
        this.onSelect(false,record)
    }
    onClearAll(){
        var { selectMap } = this.state
        selectMap.forEach(item=>{
            selectMap = this.cascader.activeSelect(false,item)
        })
        this.initShowOptions()
        this.setState({
            selectMap,
        },()=>{
            this.onEmitChange()
        })
    }
    onHandleClear(values){
        const { propName='name' } = this.props
        if(! values.length){
            return this.onClearAll()
        }
        const { selectMap } = this.state
        selectMap.filter(e=>values.indexOf(e[propName]) === -1).map(e=>this.onClear(e))
    }



    renderItem(options){
        const { propValue='value',propName="name" } = this.props
        const { showMap } = this.state
        return (
            <ul className='jad-cascaderTree-container' onMouseDown={e => e.preventDefault()}>
                {
                    options.map( (item,index) =>{
                    const active = !!(showMap[item.level] && showMap[item.level][propValue] === item[propValue])
                    return <li key={item[propValue]} className={active?'active':''} >
                            <Checkbox 
                                checked={item.checked} 
                                indeterminate={item.indeterminate}
                                onClick={ e=>{this.onSelect(!item.checked,item)}}
                            ><span onMouseDown={e => e.preventDefault()}>{item[propName]}</span></Checkbox>
                            {
                            !Tools.isEmptyArray(item.children)?
                                <span className='icon-right-box' onClick={()=>this.onAddShowOptions(item,item.level+1,item.children)}>
                                    <Icon className='icon-right' type="right" />
                                </span>
                                :null
                            }
                        </li>
                    })
                }
            </ul>
        )
    }
    renderDropdown(menuNode, props){
        const { showOptions } = this.state
        return<div className='jad-cascaderTree-wrap' onMouseDown={e => e.preventDefault()}>
            <div className='jad-cascaderTree-cascader-select-warp' onMouseDown={e => e.preventDefault()}>
                <Row gutter={24} style={{margin:'0px'}}>
                    {
                        showOptions.map((item,index)=>{
                            return  <Col span={Math.round(24/showOptions.length)} key={index} style={{padding:'0px'}}>
                                { this.renderItem(item) }
                            </Col>
                        })
                    }
                </Row>
            </div>
        </div>
    }
    render() {
        const { selectProps,propName='name',disabled=false  } = this.props as any
        const { selectMap } = this.state
        return (
            <Select 
                {...selectProps}
                disabled={disabled} 
                mode="multiple"
                allowClear
                value={selectMap.map(e=>e[propName])}
                onChange={this.onHandleClear.bind(this)}
                dropdownRender={this.renderDropdown.bind(this)} 
            />
        )
    }



}