import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {Dropdown} from 'antd';
import DropdownOverlay from './DropdownOverlay';
import find from 'lodash/find';
import classnames from 'classnames';
import {addContentPath} from '../../util/index.js'

@inject('hrmScheduleSetting')
@observer
export default class ListHeader 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);
    }

    render(){
        const {hrmScheduleSetting: store, weekDay, day} = this.props;
        const {toJS, moment, shortWeekdays, searchDate, onCellMouseEnter, onCellMouseLeave, holidays, today, groupValidatDate} = store;
        let trigger = [];
        const m = moment(toJS(searchDate), "YYYY-MM");
        m.set('date', day);
        const {start, end} = toJS(groupValidatDate);
        let isBetween = true;
        if(start != null){
            isBetween = m.isBetween(start, end) || m.isSame(start) || m.isSame(end);
        }
        // if((!m.isBefore(today) || m.isSame(today, 'day')) && isBetween)
            trigger.push('click');
        const date = m.format('YYYY-MM-DD');
        const holidayInfo = find(toJS(holidays), {date});

        const overlayProps = {
            store,
            target: 'header',
            date,
            v: this.state.v,
            hide: () => this.setState({v: false}),
            onSelectHandle: () => this.setState({op: true})
        }

        const className = classnames({
            header: true,
            ['header-disabled']: trigger.length == 0
        });

        return (
            <div>
                <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@4fle74`} visible={this.state.v}
                    overlay={<DropdownOverlay ecId={`${this && this.props && this.props.ecId || ''}_DropdownOverlay@hxt3te`} {...overlayProps} />}
                    getPopupContainer={() => document.getElementById("scheduleSetting")}
                    trigger={this.props.dropdown == null ? trigger : ['']}
                    onVisibleChange={this.onVisibleChangeHandle}
                >
                    <div className={className} name={`scheduleCol${day}`} onMouseEnter={() => onCellMouseEnter(day)} onMouseLeave={onCellMouseLeave}>
                        <div className="dh" style={{ color: weekDay == 6 || weekDay == 0 || holidayInfo != null ? "red" : "#000" }}>
                            <div className="d">{day}</div>
                            <div className="w">{shortWeekdays[weekDay]}</div>
                        </div>
                        {
                            holidayInfo != null &&
                            <div className="tag">
                                <img src={addContentPath(`/hrm/hrm_e9/images/${['1','3'].indexOf(holidayInfo.type) > -1 ? 'rest' : 'work'}.png`)} />
                            </div>
                        }
                    </div>
                </Dropdown>
            </div>
        )
    }
}