import React, { useState, useEffect } from 'react';

import { FieldArray } from 'react-final-form-arrays';

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

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import { required } from 'store/utils/validation';
import { Field } from 'react-final-form';
import ProjectInput from 'components/formItems/ProjectInput';
import { FaMinus, FaPlus } from 'react-icons/fa';
import get from 'lodash/get';
import moment from 'moment';
import styleIdentifiers from './timeslotsInput.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type TimeslotsInputProps = StateProps & DispatchProps & OwnProps;

const TimeslotsInput = (props: TimeslotsInputProps) => {
  const { values, name, relative, max = 4 } = props;
  // // mapStateToProps
  // const lg = useSelector((state: StoreState) => state.content.lg);
  // // Allow to dispatch actions
  // const dispatch = useDispatch();

  return (
    <div className={styles('timeslots-input', relative && 'relative')}>
      <FieldArray name={name}>
        {({ fields }) => (
          <div className={styles('field')}>
            {fields.map((field, index) => {
              const minDate = get(values, `${field}.from`);
              const maxDate = get(values, `${field}.to`);

              return (
                <div className={styles('timeslot')} key={index}>
                  <Field
                    noMargin
                    component={ProjectInput}
                    seed="time"
                    name={`${field}.from`}
                    noError
                    max={maxDate}
                    validate={required}
                    customClassName={styles('input')}
                  />
                  <TextItem className={styles('sep')} path="à" />
                  <Field
                    noMargin
                    component={ProjectInput}
                    seed="time"
                    name={`${field}.to`}
                    noError
                    min={minDate}
                    validate={required}
                    customClassName={styles('input')}
                  />
                  {fields.length > 1 && (
                    <div
                      className={styles('icon-wrapper', 'remove')}
                      onClick={() => fields.remove(index)}
                    >
                      <FaMinus />
                    </div>
                  )}
                </div>
              );
            })}
            {fields.length < max && (
              <div className={styles('icon-wrapper', 'add')} onClick={() => fields.push({})}>
                <FaPlus />
              </div>
            )}
          </div>
        )}
      </FieldArray>
    </div>
  );
};

export default TimeslotsInput;
