import React, { Component } from 'react';
import { PageComponent,} from '../../types/index';
import classname from 'classnames'
import * as Tools from 'jad-tool'



const resetMap = function(weekMap,len?){
    const length = len? len: 48
    return weekMap.map( e =>{
        return new Array(length).fill(false)
    })

}
const makeUpNumber = function(num, length = 2){
    num = Math.floor( num * (24/48))
    num = num === 24? 0: num;
    return (num / Math.pow(10, length)).toFixed(length).substr(2);
}
type timeMapType = boolean[][]



export class MultiSelectTable extends Component <PageComponent<{
    value?:any,
    onAdapter:(timeMap:timeMapType,value)=>timeMapType,
    onChange?:(selectMap)=>void
    disabled?: boolean
}>> {
    week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
    dayHour= [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
    timeMap = resetMap(this.week)

    state = {
        drafting: false,
        selectFlag: false,
        afterXY: {x:false,y:false},
        checkBuff: resetMap(this.week),
        activeBuff : resetMap(this.week),
        hasMove: false,
    }


    componentDidMount(){
        const { value=null } = this.props
        if(value){
            this.initValue()
        }
    }
    UNSAFE_componentWillReceiveProps(nextProps){
        if(nextProps.value && !this.props.value){
            setTimeout(()=>this.initValue())
        }
    }
    initValue(){
        const { value=null,onAdapter=(e)=>e } = this.props
        const timeMap = resetMap(this.week)
        const checkBuff = onAdapter(timeMap,value)
        if(Tools.isEmptyArray(checkBuff) || checkBuff.length !== 7 || Tools.isEmptyArray(checkBuff[0]) || checkBuff[0].length !== 48 ){
            return false;
        }
        this.setState({
            checkBuff
        })
    }
    ifCheck(){
        const { activeBuff,checkBuff,selectFlag } = this.state
        return checkBuff.map( (item,x) => item.map( (e,y) => {
            if( e && activeBuff[x][y]){
                return selectFlag;
            }
            if( !e && activeBuff[x][y]){
                return selectFlag;
            }
            return e
        }))
    }

    
    onHandleCallBack(){
        const { onChange } = this.props
        const { checkBuff} = this.state
        if(Tools.isExist(onChange) && Tools.isFunction(onChange)){
            onChange(checkBuff)
        }
    }
    onHandleClick(x,y){
        let { checkBuff, hasMove} = this.state;
        let { disabled } = this.props
        if(disabled) return
        if(!hasMove){ // 非移动时可能触发
            checkBuff[x][y] = !checkBuff[x][y]; // ---此处
            this.setState({
                checkBuff: checkBuff,
                hasMove: false,
            },()=>{
                this.onHandleCallBack()
            })
        }
    }
    onHandleMouseUp(x,y){
        let { activeBuff} = this.state
        let { disabled } = this.props
        if(disabled) return
        this.setState({
            drafting: false,
            afterXY: {x:x,y:y},
            activeBuff:resetMap(this.week),
            checkBuff: this.ifCheck()
        },()=>{
            this.onHandleCallBack()
        })
    }
    onHandleMouseMove(x,y){
        let { activeBuff,afterXY,drafting} = this.state;
        let { disabled } = this.props
        if(disabled) return
        if(!drafting){
            return false;
        }
        activeBuff = activeBuff.map( (item,indexX) => {
            return item.map( (e,indexY) =>{
                //第四象限
                if(indexX >= afterXY.x && indexX <= x && indexY>=afterXY.y && indexY<=y){
                    return true
                }
                //第三象限
                if(indexX <= x&& indexX >= afterXY.x && indexY>=y && indexY<=afterXY.y){
                    return true
                }
                //第一象限
                if(indexX >= x&& indexX <= afterXY.x && indexY>=afterXY.y && indexY<=y){
                    return true
                }
                //第二象限
                if(indexX >= x && indexX <= afterXY.x && indexY>=y && indexY<=afterXY.y ){
                    return true
                }
                return false
            })
        })
        this.setState({
            activeBuff:activeBuff,
            hasMove: true,
        })
    }
    onHandleMouseDown(x,y){
        let { checkBuff } = this.state
        let { disabled } = this.props
        if(disabled) return
        this.setState({
            selectFlag:!checkBuff[x][y],
            afterXY:{x:x,y:y},
            drafting:true,
            hasMove: false,
        })
    }


    renderFormat(){
        const { checkBuff } = this.state
        const checkWeek = this.week.filter( (item,index)=>{
            const newItem = checkBuff[index].filter( (e,i)=>{
                return e
            })
            return newItem.length > 0
        })
        const renderSpan = (indexX)=>{
            return checkBuff[indexX].map( (item,index) =>{
                const even = index%2
                return item? 
                    <span  key={index}>
                        {
                            !even? 
                            `${makeUpNumber(index)}:00~${makeUpNumber(index)}:30` 
                            : `${makeUpNumber(index)}:30~${makeUpNumber(index+1)}:00`
                        }
                    </span>
                :''
            })
        }
        if(checkWeek.length === 0){
            return null
        }
        return (
            <div className='jad-MultiSelectTable-format-warp'>
                <label>已选时间:</label>
                <ul>
                    { 
                        checkWeek.map( item=>{
                            return <li key={item}>
                                <label>{item}:</label>
                                <div className='content'>
                                    {renderSpan(this.week.indexOf(item))}
                                </div>
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }
    renderTd(item,x){
        const { activeBuff,checkBuff } = this.state
        return item.map( (el,y) => {
            const select = activeBuff[x][y]? 'active':''
            const check = checkBuff[x][y]? 'checked':''
            return <td
                key={`${x}-${y}`}
                onClick={()=>{this.onHandleClick(x,y)}}
                onMouseDown={()=>{this.onHandleMouseDown(x,y)}}
                onMouseUp={()=>{this.onHandleMouseUp(x,y)}}
                onMouseMove={()=>{this.onHandleMouseMove(x,y)}}
                className={classname(select,'time',check)}
            ></td>
        })
    }
    renderThead(){
        return (
            <React.Fragment>
                <tr>
                    <td className={classname('week','week-bottom-hide')}>
                        <span className='week-date-divider'>星期/时间</span>
                    </td>
                    <td>上午</td>
                    <td>下午</td>
                </tr>
                <tr>
                    <td className={classname('week','week-top-hide')}></td>
                    { 
                        this.dayHour.map( e =>
                             <td key={e} className='dayHour' >
                                <div className='content'>{e}</div>
                            </td>
                        ) 
                    }
                </tr>
            </React.Fragment>
        )
    }
    renderTbody(){
        return this.timeMap.map( (item,index) =>{
            return <tr key={index}>
                <td key={this.week[index]} className='week' >
                    {this.week[index]}
                </td>
                {this.renderTd(item,index)}
            </tr>
        })
    }
    render() {
        return (
            <React.Fragment>
                <h5 className='jad-MultiSelectTable-title'>
                    单击方格【可以选中/取消时间点】,单击拖动方格【可以选中/取消一连续时间段】
                    <span className='hint'>
                        <i className='action'></i>已选择
                    </span>
                    <span className='hint'>
                        <i></i>未选择
                    </span>
                </h5>
                {/* table */}
                <table className='jad-MultiSelectTable-table-warp'>
                    <tbody>
                        {this.renderThead()}
                        {this.renderTbody()}
                    </tbody>
                </table>
                {/* 已选择 */}
                {this.renderFormat()}
            </React.Fragment>
        )
    }


}