import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Table, ThemedAppbar, MinimizedAppbar, LeaveAnnualModal, LinearProgress, DialogError, DialogErrorHelper } from '../../components';
import { leave_getLeaveRequest, leave_submit, leave_cancel } from '../../services/dataService';
import { Link } from 'react-router-dom';
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
import { DatePicker } from 'material-ui-pickers';
import { Add as AddIcon } from '@material-ui/icons';
import moment from 'moment';
import axios from 'axios';
import MediaQuery from 'react-responsive';

const mapStateToProps = state => {
  return {
    dataSourceLeave: state.leave.leaveRequest.dataSourceLeave,
    startDateLeave: state.leave.leaveRequest.startDate,
    endDateLeave: state.leave.leaveRequest.endDate
  };
};

const mapDispatchToProps = dispatch => {
  return {
    saveStartDateLeaveRequest: startDate => {
      dispatch({
        type: 'LEAVE_VIEWER-SAVED_STARTDATE_LEAVE',
        payload: startDate
      });
    },
    saveEndDateLeaveRequest: endDate => {
      dispatch({
        type: 'LEAVE_VIEWER-SAVED_END-DATE-LEAVE',
        payload: endDate
      });
    },
    saveDataSourceLeaveRequest: dataSource => {
      dispatch({
        type: 'LEAVE_VIEWER-LEAVE_EMPLOYEE_DATASOURCE',
        payload: dataSource
      });
    }
  };
};

class LeaveView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabChosen: 0,
      isFetchingAPI: false,
      isOpenLeaveAnnual: false
    };

    this.state = DialogErrorHelper.registerState(this.state);
    this.signal = axios.CancelToken.source();
    this.tabList = ['Leave Request', 'Leave Balance'];
  }

  extTabChanged = de_tab => {
    this.setState({
      tabChosen: de_tab
    });
  };

  extMenuChanged = de_menu => {
    this.setState({
      tabChosen: de_menu
    });
  };

  //handle datetime change from startDate
  handleDateStartChange = async startDate => {
    await this.props.saveStartDateLeaveRequest(startDate);
    await this.leaveViewerTableIntegrateRefresh();
  };

  //handle datetime change from untilDate
  handleDateEndChange = async endDate => {
    await this.props.saveEndDateLeaveRequest(endDate);
    await this.leaveViewerTableIntegrateRefresh();
  };

  //leave Viewer Foreach and add Column Action button
  leaveViewerTableIntegrationAction = dataSource => {
    let modifiedDataSource = [];
    let ButtonTypeStatus;

    dataSource.forEach(row => {
      //checked statusid
      switch (row.statusId) {
        case 0: // case entry status
        case 2: // case revised status
          ButtonTypeStatus = (
            <React.Fragment>
              <Button color='primary' onClick={() => this.onSubmitLeave(row.id)}>
                Submit
              </Button>
              <Link className='btn-remove-link' to={'/leave/edit/' + row.id}>
                <Button color='primary'>Edit</Button>
              </Link>
              <Button color='primary' onClick={() => this.onCancelLeave(row.id)}>
                Cancel
              </Button>
            </React.Fragment>
          );
          break;
        case 1: // case submitted status
          ButtonTypeStatus = (
            <React.Fragment>
              <Link className='btn-remove-link' to={'/leave/edit/' + row.id}>
                <Button color='primary'>View</Button>
              </Link>
              <Button color='primary' onClick={() => this.onCancelLeave(row.id)}>
                Cancel
              </Button>
            </React.Fragment>
          );
      }
      modifiedDataSource.push(
        Object.assign({}, row, {
          action: <React.Fragment>{ButtonTypeStatus}</React.Fragment>
        })
      );
    });
    return modifiedDataSource;
  };

  //leave viewet Execute API / intergrate API into Table
  leaveViewerTableIntegrateRefresh = () => {
    const { isFetchingAPI } = this.state;
    const { startDateLeave, endDateLeave } = this.props;
    let paramBody = {
      startDate: moment(startDateLeave).format('YYYY-MM-DD'),
      endDate: moment(endDateLeave).format('YYYY-MM-DD')
    };
    if (!isFetchingAPI) {
      this.setState({ isFetchingAPI: true });
      leave_getLeaveRequest(paramBody, this.signal.token)
        .then(response => {
          this.setState({ isFetchingAPI: false });
          this.props.saveDataSourceLeaveRequest(response);
        })
        .catch(() => {
          this.setState(
            DialogErrorHelper.setToggleDialog(
              {
                isFetchingAPI: false
              },
              <p>Error</p>,
              <p>Exception</p>
            )
          );
        });
    }
  };

  // onSubmitLeave = id => {
  //   const {isFetchingAPI} = this.state;

  //   if(isFetchingAPI){
  //     this.setState({isFetchingAPI : true}, () => {
  //       leave_submit(id, this.setState.token)
  //         .then(submitResponse => {
  //           console.log({ submitResponse });
  //           this.leaveViewerTableIntegrateRefresh();
  //         })
  //         .catch(submit_exception => {
  //           console.log({ submit_exception });
  //           this.setState({ isFetchingAPI: false });
  //         });
  //     })
  //   }
  // };

  // onCancelLeave = id => {
  //  const { isFetchingAPI } = this.state;

  //  if (isFetchingAPI) {
  //    this.setState({ isFetchingAPI: true }, () => {
  //      leave_cancel(id, this.setState.token)
  //        .then(cancelResponse => {
  //          console.log({ cancelResponse });
  //          this.leaveViewerTableIntegrateRefresh();
  //        })
  //        .catch(cancelation_exception => {
  //          console.log({ cancelation_exception });
  //          this.setState({ isFetchingAPI: false });
  //        });
  //    });
  //  }
  // };

  onSubmitLeave = id => {
    if (this.state.isFetchingAPI) return false;

    this.setState({ isFetchingAPI: true }, () => {
      const param = { id };
      leave_submit(param, this.signal.token)
        .then(submit_response => {
          // seperitnya tidak perlu set fetching false, karena ini ada fetching lagi
          console.log({ submit_response });
          this.getLeaveEmployeeFromAPI();

          // tidak bisa sama dengan leave editor karnea tampilan beda
          // console.log({submit_response});
          // this.setState(
          //     {
          //         isFetchingAPI: false,
          //         statusId: submit_response.data.statusId,
          //         status: submit_response.data.status,
          //     },
          //     this
          // )
        })
        .catch(submit_exception => {
          console.log({ submit_exception });
          this.setState({ isFetchingAPI: false });
        });
    });
  };

  onCancelLeave = id => {
    if (this.state.isFetchingAPI) return false;

    this.setState({ isFetchingAPI: true }, () => {
      const param = { id };
      leave_cancel(param, this.signal.token)
        .then(cancelation_response => {
          console.log({ cancelation_response });
          this.getLeaveEmployeeFromAPI();
        })
        .catch(cancelation_exception => {
          console.log({ cancelation_exception });
          this.setState({ isFetchingAPI: false });
        });
    });
  };

  onShowAnnualLeave = () => {
    this.setState({ isOpenLeaveAnnual: true });
  };

  onCloseAnnualLeave = () => {
    this.setState({ isOpenLeaveAnnual: false });
  };

  componentDidMount() {
    this.leaveViewerTableIntegrateRefresh();
  }

  render() {
    const { startDateLeave, endDateLeave, dataSourceLeave } = this.props;
    const { isFetchingAPI } = this.state;

    return (
      <React.Fragment>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <div className='container-fluid no-breadcrumb'>
            {/* Row Box */}
            <div className='row'>
              <div className='col-md-12'>
                <div className='box box-default' style={{ marginBottom: '0px' }}>
                  {/* Header */}
                  <div className='box-header' style={{ paddingLeft: '0px', paddingRight: '0px' }}>
                    {/* Untuk bagian header yg text dan button, sepertinya masih bisa diakali pakai bootstrap daripada dibuatkan komponen baru. Tapi spertinya lebih mending dibuatkan komponen sendiri karnea button pakai float (masih kurang paham cara kerja float) */}
                    {/* Header Big */}
                    <MediaQuery minDeviceWidth={1025}>
                      <div className='col-md-12' style={{ paddingLeft: '1.25em', paddingRight: '1.25em' }}>
                        <LeaveAnnualModal modalOpen={this.state.isOpenLeaveAnnual} onCloseAnnualLeave={this.onCloseAnnualLeave} />
                        <Button
                          variant='contained'
                          className='S_Leave_leaveEditor_btn-theme-solid'
                          style={{ float: 'right', marginTop: '10px', marginRight: '20px' }}
                          onClick={this.onShowAnnualLeave}
                        >
                          Show Annual Leave
                        </Button>

                        <Button
                          variant='contained'
                          style={{
                            color: 'white',
                            backgroundColor: '#F17C16',
                            float: 'right',
                            marginTop: '10px',
                            marginRight: '20px',
                            paddingLeft: '8px'
                          }}
                        >
                          <AddIcon style={{ marginRight: '5px' }} /> New Leave
                        </Button>
                        <h5 style={{ fontWeight: 'bold' }}>Leave</h5>
                        <p>Lorem Ipsum Dummy Text</p>
                      </div>

                      {/* Tabs */}
                      <div className='col-md-12' style={{ paddingLeft: '0px', paddingRight: '0px' }}>
                        <ThemedAppbar onTabChange={this.extTabChanged} currentTab={this.state.tabChosen} tabList={this.tabList} />
                      </div>
                      {/* End of Tabs */}
                    </MediaQuery>
                    {/* End of Header Big */}

                    {/* Header Small */}
                    <MediaQuery maxDeviceWidth={1024}>
                      <div className='col-md-12' style={{ paddingLeft: '0.75em', paddingRight: '0.75em' }}>
                        <Button
                          variant='contained'
                          style={{
                            color: 'white',
                            backgroundColor: '#F17C16',
                            float: 'right',
                            marginTop: '10px',
                            marginRight: '20px',
                            paddingLeft: '8px'
                          }}
                        >
                          <AddIcon style={{ marginRight: '5px' }} /> New Leave
                        </Button>
                        {/* Ini entah perlu teks atau tidak */}
                        <h6 style={{ fontWeight: 'bold' }}>Leave</h6>
                        <p>Lorem Ipsum Dolores</p>
                      </div>

                      <div className='col-md-12' style={{ paddingLeft: '0px', paddingRight: '0px' }}>
                        {/* appbar ini ada opsi supaya bisa tetap ada walau di-scroll. Mungkin fitur tersebut bisa dipakai */}
                        <MinimizedAppbar onMenuChange={this.extMenuChanged} currentMenu={this.state.tabChosen} menuList={this.tabList} />
                      </div>
                    </MediaQuery>
                    {/* End of Header Small */}
                  </div>
                  {/* End of Header */}

                  {/* Body */}
                  <div className='box-body'>
                    {/* Leave Request */}
                    {this.state.tabChosen === 0 && (
                      <React.Fragment>
                        <div className='row'>
                          <div className='col-md-7'>
                            {/* Date Range */}
                            <div className='row'>
                              <div className='col-md-3' style={{ height: '50px', marginTop: '10px' }}>
                                Date Range:
                              </div>

                              <div className='col-md-9'>
                                <DatePicker
                                  disabled={isFetchingAPI}
                                  autoOk
                                  animateYearScrolling={false}
                                  label='Start Date'
                                  showTodayButton
                                  value={moment(startDateLeave).format('DD MMMM YYYY')}
                                  onChange={event => this.handleDateStartChange(event)}
                                  style={{ marginRight: '20px', width: '47%' }}
                                  format='YYYY/MM/DD'
                                />

                                <DatePicker
                                  disabled={isFetchingAPI}
                                  autoOk
                                  animateYearScrolling={false}
                                  label='Until Date'
                                  showTodayButton
                                  value={moment(endDateLeave).format('DD MMMM YYYY')}
                                  onChange={event => this.handleDateEndChange(event)}
                                  format='YYYY/MM/DD'
                                  style={{ width: '48%' }}
                                />
                              </div>
                            </div>
                            {/* End of DateRange */}
                          </div>
                        </div>
                        <div className='row'>
                          <div className='col-md-12'>
                            {/* Table */}
                            <div className='mt-4'>
                              <hr />
                              {isFetchingAPI && <LinearProgress />}
                              <Table
                                pageSize={20}
                                columns={[
                                  { name: 'code', title: 'Code' },
                                  { name: 'userEntry', title: 'User Entry' },
                                  { name: 'employee', title: 'Employee' },
                                  { name: 'leaveType', title: 'Leave Type' },
                                  { name: 'action', title: '#' }
                                ]}
                                rows={this.leaveViewerTableIntegrationAction(dataSourceLeave)}
                                columnExtensions={[
                                  { columnName: 'code', width: 300, wordWrapEnabled: true },
                                  { columnName: 'userEntry', width: 250, wordWrapEnabled: true },
                                  { columnName: 'employee', width: 250, wordWrapEnabled: true },
                                  { columnName: 'leaveType', width: 200, wordWrapEnabled: true },
                                  { columnName: 'action', width: 250 }
                                ]}
                              />
                            </div>
                            {/* End of Table */}
                          </div>
                        </div>
                      </React.Fragment>
                    )}
                    {/* End of Leave Request */}

                    {/* LeaveBalance */}
                    {this.state.tabChosen === 1 && (
                      <React.Fragment>
                        <div className='row'>
                          <div className='col-md-12'>
                            <h5>Leave Balance</h5>
                          </div>
                        </div>
                      </React.Fragment>
                    )}
                    {/* End of Leave Balance */}
                  </div>
                  {/* End of Body */}
                </div>
              </div>
            </div>
            {/* End of Row Box */}
          </div>
          {/* end of container-fluid-breadcrumb */}
        </MuiPickersUtilsProvider>
      </React.Fragment>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LeaveView);