import React, {Component} from 'react';
import {observer} from 'mobx-react';
import DropdownOverlay from './DropdownOverlay';
import {Dropdown,message} from 'antd';
import classnames from 'classnames';
import find from 'lodash/find';
import { i18n } from '../../public/i18n';

@observer
export default class ListCell extends Component{
    constructor(props){
        super(props);
        this.state = {
            v: false,
            op: false
        }
    }

    onVisibleChangeHandle = v => {
        setTimeout(() => {
            if(!this.state.op){
                this.setState({v, op: false});
            }else
                this.setState({op: false});
        }, 200);
    }

    renderDateCell = () => {
        const {store, colIndex, record} = this.props;
        const {moment, toJS, searchDate, shiftList, onCellMouseEnter, onCellMouseLeave, today, groupValidatDate} = store;
        let trigger = [];
        const m = moment(toJS(searchDate), "YYYY-MM");
        m.set('date', colIndex);
        const {start, end} = toJS(groupValidatDate);
        let isBetween = true;
        if(start != null){
            isBetween = m.isBetween(start, end) || m.isSame(start) || m.isSame(end);
        }
        if (m.isSameOrAfter(record.validatefrom) && m.isSameOrBefore(record.validateto))
            trigger.push('click');
        const date = m.format('YYYY-MM-DD');

        const id = record[date];
        const sList = store.toJS(shiftList);
        const d = id != null ? find(sList, { id }) : null;

        let title = '';
        let name = "";
        let type = null; //rest
        let background = null;
        if (d != null) {
          title = d.name;
          name = d.name.substring(0, 2);
          type = d.id === 0 ? 0 : 1;
          background = d.bgColor;
        }
        const className = classnames({
          cell: true,
          rest: type === 0,
          shift: type === 1,
          ['cell-disabled']: trigger.length == 0,
          bodyCell: true
        });
        const overlayProps = {
            store,
            target: 'cell',
            date,
            record,
            v: this.state.v,
            hide: () => this.setState({v: false}),
            onSelectHandle: () => this.setState({op: true})
        }
        const onDropdownonClick = () => {
            if (trigger.length == 0) {
                message.warning(i18n.label[546185]())
            }
        }
        return (
            <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@382jyg`} visible={this.state.v}
                overlay={<DropdownOverlay ecId={`${this && this.props && this.props.ecId || ''}_DropdownOverlay@fpgeqx`} {...overlayProps} />}
                getPopupContainer={() => document.getElementById("scheduleSetting")}
                trigger={trigger}
                onVisibleChange={this.onVisibleChangeHandle}
                onClick={onDropdownonClick}
            >
                <div title={title} className={className} name={`scheduleCol${colIndex}`} style={{ background: background }} onMouseEnter={() => onCellMouseEnter(colIndex)} onMouseLeave={onCellMouseLeave}>
                    {name}
                </div>
            </Dropdown>
        )
    }

    renderNameCell = () => {
        const {store, colIndex, record} = this.props;
        const overlayProps = {
            store,
            target: 'resource',
            record,
            v: this.state.v,
            hide: () => this.setState({v: false}),
            onSelectHandle: () => this.setState({op: true})
        }

        return (
            <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@jfsuwr`} visible={this.state.v}
                overlay={<DropdownOverlay ecId={`${this && this.props && this.props.ecId || ''}_DropdownOverlay@wh9qyi`} {...overlayProps} />}
                getPopupContainer={() => document.getElementById("scheduleSetting")}
                trigger={'click'}
                onVisibleChange={this.onVisibleChangeHandle}
            >
                <div className='cell text-elli' style={{width: 100}}>
                    {record.name}
                </div>
            </Dropdown>
        )
    }
    
    render(){
        const {withName} = this.props;
        if(!withName)
            return this.renderDateCell();
        else
            return this.renderNameCell();
    }
}