import React, { useState, useEffect } from 'react';
import { Form } from 'react-final-form';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink, withRouter } from 'react-router-dom';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';

import WorkspaceDetail from 'components/pageItems/WorkspaceDetail';
import actionsBuilder from 'store/appActions';
import { pushRoute } from 'store/utils/routes';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import moment from 'moment';

import styleIdentifiers from './detailWorkspaceBooking.scss';

let Calendar;
if (__BROWSER__) {
  Calendar = require('react-date-range').Calendar;
  require('!style-loader!css-loader!react-date-range/dist/styles.css'); // main style file
  require('!style-loader!css-loader!react-date-range/dist/theme/default.css'); // theme css file
}

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DetailWorkspaceBookingProps = StateProps & DispatchProps & OwnProps;
/**
 * DEPRECATED
 */
const DetailWorkspaceBooking = (props: DetailWorkspaceBookingProps) => {
  const {
    match: { params },
  } = props;
  // mapStateToProps
  const workspace = useSelector(
    (state: StoreState) => state.workspace.detail && state.workspace.detail.data,
  );

  // const {
  //   title,
  //   availability: { noWeekend },
  // } = workspace;

  const lg = useSelector((state: StoreState) => state.content.lg);

  // Allow to dispatch actions
  const dispatch = useDispatch();
  const { workspaceDetail } = actionsBuilder(dispatch, ['detail']);

  useEffect(() => {
    if (params.id) {
      workspaceDetail({
        id: params.id,
      });
    }
  }, []);

  const handleSelect = () => {};

  const disableDays = day => {
    console.log('the day', moment(day).weekday());
    if (workspace && workspace.availability) {
      if (workspace.availability.noWeekend) {
        if (moment(day).weekday() === 5) return true;
        if (moment(day).weekday() === 6) return true;
      }

      let disabled = false;

      if (workspace.availability.exceptions) {
        workspace.availability.exceptions.forEach(exception => {
          // if (exception.fullday) {

          if (
            moment(day) >= moment(exception.dates.startDate) &&
            moment(day) <= moment(exception.dates.endDate)
          ) {
            disabled = true;
          }

          // }
        });
      }

      console.log(disabled, day);
      return disabled;
    }
    return false;
  };

  console.log('workspace', workspace);

  if (!workspace) return false;

  return (
    <div className={styles('detail-workspace-booking')}>
      <div className={styles('container')}>
        <div className={styles('top')}>
          <div className={styles('left')}>
            <div className={styles('nav')}>
              <NavLink to={pushRoute('account', lg)} className={styles('link')}>
                <TextItem path="pages.mySpaces.title" />
              </NavLink>
              <NavLink to={pushRoute('account', lg)} className={styles('link')}>
                <TextItem path={(workspace && workspace.title) || 'no title'} />
              </NavLink>
              <TextItem path="pages.myBookings.management" className={styles('strong')} />
            </div>
            <h1>
              <TextItem path={(workspace && workspace.title) || 'no title'} />
            </h1>
          </div>
          <div className={styles('right')}>
            <ProjectButton
              label="items.bookingItem.actions.edit"
              color="primary"
              action={() => history.push(pushRoute('bookings.id', lg, params))}
            />
          </div>
        </div>
        <div className={styles('content-wrapper')}>
          <Calendar disabledDay={disableDays} onChange={handleSelect} />
        </div>
      </div>
    </div>
  );
};

export default DetailWorkspaceBooking;
