import React, { useState, useEffect } 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 ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import { required, minValue, maxValue, composeValidators } from 'store/utils/validation';
import TextItem from 'components/items/TextItem';
import CustomDropdown from 'components/enhancers/CustomDropdown';
import FormElement from 'components/structure/FormElement';
import FieldWrapper from 'components/structure/FieldWrapper';
import FormItemLabel from 'components/items/FormItemLabel';
import DateRangePicker from 'components/formItems/DateRangePicker';
import moment from 'moment';
import styleIdentifiers from './headerSearchForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type HeaderSearchFormProps = StateProps & DispatchProps & OwnProps;

const commonFields = {
  noMargin: true,
  customClassName: styles('filter-item'),
  fieldWrapperClassName: styles('filter-field'),
  customContentWrapperClassName: styles('filter-field-content'),
};

// const Dropdown = CustomDropdown(DropdownItem);

const HeaderSearchForm = (props: HeaderSearchFormProps) => {
  const { values, form, handleSubmit, submitting, valid } = props;

  const [forceClose, setForceClose] = useState(false);

  useEffect(() => {
    if (values && values.dateFrom && values.dateTo && !values.dates) {
      form.mutators.setValue('dates', {
        startDate: values.dateFrom,
        endDate: values.dateTo,
      });
    }
  }, [values]);

  const handleChange = value => {
    console.log('slider/range value(s)', value);
  };

  const handleDateChange = dates => {
    form.mutators.setValue('dateFrom', dates ? dates.startDate : null);

    form.mutators.setValue('dateTo', dates ? dates.endDate : null);
  };

  const handleDone = () => {
    setForceClose(true);
    setTimeout(() => setForceClose(false), 500);
  };

  const minFrom = minValue(values.hoursFrom);

  return (
    <form className={styles('HeaderSearchForm')} onSubmit={handleSubmit}>
      <div className={styles('inline', 'types')}>
        <Field
          component={ProjectInput}
          seed="checkbox"
          name="meeting"
          labelClassName={styles('label')}
          checkedClassName={styles('active')}
          onRight
          noMargin
          label="lists.workspaceType.meeting"
        />
        <Field
          component={ProjectInput}
          seed="checkbox"
          name="individual"
          labelClassName={styles('label')}
          checkedClassName={styles('active')}
          onRight
          noMargin
          label="lists.workspaceType.individual"
        />
        <Field
          component={ProjectInput}
          seed="checkbox"
          labelClassName={styles('label')}
          checkedClassName={styles('active')}
          name="open"
          onRight
          noMargin
          label="lists.workspaceType.open"
        />
      </div>
      <div className={styles('inline', 'spacing')}>
        <div className={styles('filter-wrapper')}>
          <Field
            component={ProjectInput}
            name="location"
            type="string"
            seed="geoloc"
            label="forms.search.location.location"
            placeholder="forms.search.location.placeholder"
            {...commonFields}
            isInput
            customClassName={styles('filter-item', 'first')}
          />
          <Field
            fieldProps={{
              ...commonFields,
              customClassName: '',
            }}
            dropdown
            component={DateRangePicker}
            minDate={new Date()}
            doneAction={handleDone}
            onChange={handleDateChange}
            seed="daterange"
            name="dates"
            dropdownClassName={styles('filter-item')}
            label="forms.search.dates.dates"
            placeholder="forms.search.dates.placeholder"
            forceClose={forceClose}
          />
          <Field
            component={ProjectInput}
            name="hoursFrom"
            seed="time"
            label="forms.search.from"
            large
            max={values.hoursTo}
            {...commonFields}
            customClassName={styles('filter-item', 'hour')}
          />
          <Field
            component={ProjectInput}
            name="hoursTo"
            seed="time"
            label="forms.search.to"
            large
            min={values.hoursFrom}
            validate={minFrom}
            {...commonFields}
            customClassName={styles('filter-item', 'hour', 'last')}
          />
        </div>
        <ProjectButton
          noMargin
          relative
          disabled={submitting || !valid}
          label="forms.search.search"
          type="submit"
          color="primary"
          customClassName={styles('button')}
        />
      </div>
    </form>
  );
};

export default HeaderSearchForm;
