import React from 'react'
import { Calendar, Views, momentLocalizer } from 'react-big-calendar'
import {Drawer, Row, Col, Collapse } from 'antd';
import { MenuOutlined, UpOutlined ,DownOutlined, LeftOutlined, RightOutlined, FilterOutlined, PlusCircleOutlined} from '@ant-design/icons';
import toolbar from 'react-big-calendar/lib/Toolbar';
import FilterView from '../shared/FilterView';
import moment from 'moment'
import events from './DummyEvent'

import 'antd/dist/antd.css';
import 'react-big-calendar/lib/css/react-big-calendar.css'
import './CustomCalendarStyle.css'
import AddJobView from '../shared/AddJobView';

const { Panel } = Collapse;
const propTypes = {}

const MonthEvent = ({event}) => (
  <div className={`custom-calendar_event month ${event.status}`}>
    <p className="title">{event.title}</p>
  </div>
);

const DayEvent = ({event}) => (
  <div className={`custom-calendar_event day ${event.status}`}  onClick={() => {alert('event.title')}}>
    <p className="title">{event.title}</p>
    <p className="location">{event.location}</p>
  </div>
);

const ScheduleEvent = ({event}) => (
  <div className={`custom-calendar_event schedule ${event.status}`}  onClick={() => {alert('event.title')}}>
    <p className="title">{event.title}</p>
    <p className="location">{event.location}</p>
  </div>
);

const MiniMonthEvent = ({event}) => (
  <div className={`custom-mini_calendar_event ${event.status}`}>
    {/* <div className="event-dot"></div> */}
  </div>
);

const headerMarkup = () => (
  <div className="header-container">
    <Row className="main-control">
      <Col className="head-container" span={12}>
        <div className="icon">
          <a onClick={this.showDrawer}><MenuOutlined /></a>
        </div>
        <div className="title">
          <a onClick={this.openHeaderOption}>{this.state.selectedMonth} <i>{this.state.openHeaderOption ? <UpOutlined />:<DownOutlined />}</i> </a>
        </div>
      </Col>
      <Col className="option-container" span={12}>
        <a onClick={this.setFilterVisible(true)}><FilterOutlined /></a>
        <a onClick={this.showDrawer}><MenuOutlined /></a>
        <a onClick={this.setAddJobVisible(true)}><PlusCircleOutlined /></a>
      </Col>
    </Row>
  </div>
);


const CustomToolbar = (toolbar) => {
  const goToBack = () => {
    toolbar.date.setMonth(toolbar.date.getMonth() - 1);
    toolbar.onNavigate('prev');
  };

  const goToNext = () => {
    toolbar.date.setMonth(toolbar.date.getMonth() + 1);
    toolbar.onNavigate('next');
  };

  const goToCurrent = () => {
    const now = new Date();
    toolbar.date.setMonth(now.getMonth());
    toolbar.date.setYear(now.getFullYear());
    toolbar.onNavigate('current');
  };

  return (
    <div className={['toolbar-container']} style={{display:'none'}}>
      <div className={['back-next-buttons']}>
        <button id="toolbar_btn-back" className={['toolbar_btn-back']} onClick={goToBack}>&#8249;</button>
        <button id="toolbar_btn-current" className={['toolbar_btn-current']} onClick={goToCurrent}>today</button>
        <button id="toolbar_btn-next" className={['toolbar_btn-next']} onClick={goToNext}>&#8250;</button>
      </div>
    </div >
  );
};


class Selectable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      events,
      selectedMonth: moment(new Date()).format('MMMM'),
      prevMonth: moment(new Date()).add(-1, 'months').format('MMM'),
      nextMonth: moment(new Date()).add(+1, 'months').format('MMM'),
      openHeaderOption : true,
      filterVisible: false,
      addJobVisible: false,
    }
  }

  componentDidMount() {
    //แก้บักการเลื่อนเดือนที่ต้องกดเปล่าๆก่อนทีนึงถึงจะทำงานได้ (ยังไม่ได้หาคำตอบ)
    this.customChangeMonth('next')
 }

  customChangeMonth = (action) =>{
    let el = document.getElementsByClassName(`toolbar_btn-${action}`);
    for (var i=0;i<el.length; i++) {
        el[i].click();
    }
  }

  selectedDate = (date,event) =>{
    this.setState({ selectedDate: date})
    console.log(event)
  }

  onNavigate = (date) => {
    this.setState({
      selectedMonth: moment(date).format('MMMM'),
      prevMonth: moment(date).add(-1, 'months').format('MMM'),
      nextMonth: moment(date).add(+1, 'months').format('MMM'),
    });

  }

  changeCalendarView = (view) => {
    this.setState({ views: view})
  }

  showDrawer = () => {
    this.setState({
      drawerVisible: true,
    });
  };

  overflowY = document.getElementsByTagName('body')[0].style.msOverflowStyle;
  setFilterVisible = (visible = false) => () => {
    document.getElementsByTagName('body')[0].style.overflowY = visible ? 'hidden' : this.overflowY;
    this.setState({
      filterVisible: visible,
    });
  };

  setAddJobVisible = (visible = false) => () => {
    document.getElementsByTagName('body')[0].style.overflowY = visible ? 'hidden' : this.overflowY;
    this.setState({
      addJobVisible: visible,
    });
  };

  onClose = () => {
    this.setState({
      drawerVisible: false,
    });
  };

  createJob = ({ start, end }) => {
    const title = window.prompt('New Event name')
    let {date} = this.props;

    if (title)
      this.setState({
        events: [
          ...this.state.events,
          {
            start,
            end,
            title,
          },
        ],
      })
  }

  openHeaderOption = () => {
    this.setState({
      openHeaderOption: !this.state.openHeaderOption,
    });
  }


  render() {
    return (
      <div>
      <Drawer
              title="Menu"
              placement="left"
              closable={true}
              onClose={this.onClose}
              visible={this.state.drawerVisible}
        />
      <Drawer
        title="Filter"
        placement="bottom"
        onClose={this.setFilterVisible(false)}
        visible={this.state.filterVisible}
        height={"100%"}
      >
        <FilterView {...this.props}/>
      </Drawer>
      <Drawer
        title="Create Job"
        placement="right"
        onClose={this.setAddJobVisible(false)}
        visible={this.state.addJobVisible}
        width={"100%"}
      >
        <AddJobView {...this.props}/>
      </Drawer>
      <Collapse
          bordered={false}
          defaultActiveKey={['1']}
          className="site-collapse-custom-collapse">
          <Panel header={this.headerMarkup()} key="1" className="site-collapse-custom-panel">
            <div>
              <Row className="view-control">
                <Col className="prev_month" span={6}> <a onClick={() => this.customChangeMonth('back')}><LeftOutlined />{this.state.prevMonth}</a></Col>
                <Col className="calendar_view" span={12}>
                  <ul>
                    <li>
                      <a onClick={() => this.changeCalendarView('agenda')}><MenuOutlined />Schedule</a>
                    </li>
                    <li>
                      <a onClick={() => this.changeCalendarView('day')}><MenuOutlined />Day</a>
                    </li>
                    <li>
                      <a onClick={() => this.changeCalendarView('month')}><MenuOutlined />Month</a>
                    </li>
                  </ul>
                </Col>
                <Col className="next_month" span={6}><a onClick={() => this.customChangeMonth('next')}>{this.state.nextMonth}<RightOutlined /></a></Col>
              </Row>
                <div className="mini_calendar-container">
                  <Calendar
                    localizer={momentLocalizer(moment)}
                    events={this.state.events}
                    className="mini_calendar"
                    view={'month'}
                    date={new Date(moment(this.state.selectedDate).format())}
                    startAccessor="start"
                    endAccessor="end"
                    popup={true}
                    defaultView={Views.MONTH}
                    components={{
                      toolbar: CustomToolbar,
                      month: {
                        event: MiniMonthEvent,
                        dateHeader: ({ date, label }) => {
                          let highlightDate =
                            events.find(event =>
                              moment(date).isBetween(
                                moment(event.start),
                                moment(event.end),
                                null,
                                "[]"
                              )
                            ) != undefined;
                          return (
                            <p onClick={() => this.selectedDate(date)} className={highlightDate ? 'haveEvent' : ''}>{label}</p>
                          );
                        }
                      },
                    }}
                  />
                </div>
          </div>
          </Panel>
        </Collapse>
          <Calendar
            selectable
            localizer={momentLocalizer(moment)}
            events={this.state.events}
            view={this.state.views || 'agenda'}
            startAccessor="start"
            endAccessor="end"
            popup={true}
            date={new Date(moment(this.state.selectedDate).format())}
            defaultView={Views.MONTH}
            onSelectEvent={event => alert(event.title)}
            onSelectSlot={this.createJob}
            onNavigate={this.onNavigate}

            components={{
              agenda: { event: ScheduleEvent },
              day: { event: DayEvent },
              month: { event: MonthEvent },
              toolbar: CustomToolbar
            }}
          />


      </div>
    )
  }

}


Selectable.propTypes = propTypes

export default Selectable