import React from 'react';
import { Field } from 'react-final-form';

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

// Import actions here

import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import Button from 'components/items/Button';
import ProjectButton from 'components/items/ProjectButton';
import ProjectInput from 'components/formItems/ProjectInput';
import { required, email, composeValidators } from 'store/utils/validation';
import TextItem from 'components/items/TextItem';
import ScheduleInput from 'components/formItems/ScheduleInput';
import TimeslotsInput from 'components/formItems/TimeslotsInput';
import { FieldArray } from 'react-final-form-arrays';
import { FaTrash } from 'react-icons/fa';
import get from 'lodash/get';
import moment from 'moment';
import DateRangePicker from 'components/formItems/DateRangePicker';
import styleIdentifiers from './editHourWorkSpaceForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type EditHourWorkSpaceFormProps = StateProps & DispatchProps & OwnProps;

const EditHourWorkSpaceForm = (props: EditHourWorkSpaceFormProps) => {
  const { base, values } = props;
  // const { handleSubmit, submitting, valid } = props;

  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);

  const interval = get(values, 'availability.dates');

  return (
    <div className={styles('EditHourWorkSpaceForm')}>
      <p className={styles('small-text')}>
        <TextItem path="forms.hour.asterisk" />
      </p>
      <div className={styles('inline')}>
        <TimeslotsInput values={values} name={`${base}.hours`} />
      </div>
      <h2>
        <TextItem path="forms.hour.except" />
      </h2>
      <FieldArray name={`${base}.exceptions`}>
        {({ fields }) => (
          <>
            {fields.map((field, index) => (
              <div className={styles('exception')} key={index}>
                <div className={styles('inline')}>
                  <div className={styles('icon-wrapper')} onClick={() => fields.remove(index)}>
                    <FaTrash />
                  </div>
                  <Field
                    dropdown
                    component={DateRangePicker}
                    name={`${field}.dates`}
                    minDate={interval ? new Date(interval.startDate) : undefined}
                    maxDate={interval ? new Date(interval.endDate) : undefined}
                    placeholder="items.dateRange.selectDate"
                    validate={required}
                    fieldProps={{
                      noMargin: true,
                      customClassName: styles('custom-date'),
                    }}
                  />
                  <Field
                    customClassName={styles('custom-checkbox')}
                    noMargin
                    component={ProjectInput}
                    name={`${field}.allDay`}
                    seed="checkbox"
                    type="checkbox"
                    label="forms.hour.allDay"
                  />
                </div>
                <div className={styles('times')}>
                  {!get(values, `${field}.allDay`) && (
                    <TimeslotsInput values={values} name={`${field}.hours`} />
                  )}
                </div>
              </div>
            ))}

            <ProjectButton
              relative
              color="border-primary"
              label="forms.hour.addExcept"
              customClassName={styles('button')}
              action={() => fields.push({ hours: [{}] })}
            />
          </>
        )}
      </FieldArray>
    </div>
  );
};

export default EditHourWorkSpaceForm;
