import React, { useState, useEffect } from 'react';
import { Field, Form } 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 TextItem from 'components/items/TextItem';
import { required, email, composeValidators, checkbox } from 'store/utils/validation';
import CustomDropdown from 'components/enhancers/CustomDropdown';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import styleIdentifiers from './filtersForm.scss';

let Range;
let Slider;

if (__BROWSER__) {
  // The class
  const RcSlider = require('rc-slider');

  const createSliderWithTooltip = RcSlider.createSliderWithTooltip;

  // adding tooltip to default rc-slider (=Slider)
  Slider = createSliderWithTooltip(RcSlider.default);
  // adding tooltip to Range rc-slider
  Range = createSliderWithTooltip(RcSlider.Range);

  require('!style-loader!css-loader!rc-slider/assets/index.css');
}

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

const DropdownItem = props => {
  const { label, indic } = props;

  return (
    <div className={styles('filter-selector')}>
      <TextItem path={label} />
      {indic && <span className={styles('indic')} />}
    </div>
  );
};

const Dropdown = CustomDropdown(DropdownItem);

export type FiltersFormProps = StateProps & DispatchProps & OwnProps;

const FiltersForm = (props: FiltersFormProps) => {
  const { handleSubmit, form, values, submitting, valid, onSubmit } = props;

  const [frontend, setFrontend] = useState(false);
  useEffect(() => {
    setFrontend(true);
  }, []);
  // mapStateToProps
  const workspace = useSelector((state: StoreState) => state.workspace.list || {});

  const handleCapacity = value => {
    form.mutators.setValue('maxCapacity', value);
  };
  const handleNote = value => {
    form.mutators.setValue('note', value);
  };

  const confirmSection = (
    <div className={styles('confirm')}>
      <ProjectButton
        small
        color="border-primary"
        label="forms.filter.confirm"
        relative
        noMargin
        action={() => handleSubmit(onSubmit)}
      />
    </div>
  );

  // console.log('filters home', values);

  return (
    <form className={styles('FiltersForm')} onSubmit={handleSubmit}>
      <div className={styles('container')}>
        <div className={styles('filter')}>
          <Dropdown
            decal
            indic={values.priceMin || values.priceMax}
            noArrow
            className={styles('filter-item')}
            forceClose={workspace.loading}
            fixedMobile
            contentClass={styles('filter-content')}
            label="forms.filter.price"
          >
            <TextItem path="forms.filter.hourPrice" className={styles('title-content')} />
            <div className={styles('filter-sub-content', 'flex')}>
              <Field
                component={ProjectInput}
                name="priceMin"
                inputType="number"
                min={1}
                placeholder="forms.filter.priceMin"
                customClassName={styles('filter-input')}
                fieldWrapperClassName={styles('filter-item', 'min')}
              />
              <Field
                component={ProjectInput}
                name="priceMax"
                inputType="number"
                min={values.priceMin}
                // type="select"
                // seed="select"
                placeholder="forms.filter.priceMax"
                customClassName={styles('filter-input')}
                fieldWrapperClassName={styles('filter-item', 'max')}
              />
            </div>
            {confirmSection}
          </Dropdown>
        </div>

        <div className={styles('filter')}>
          <Dropdown
            noArrow
            forceClose={workspace.loading}
            className={styles('filter-item')}
            contentClass={styles('filter-content')}
            label="forms.filter.capacity"
            fixedMobile
            indic={values.maxCapacity > 0}
          >
            <TextItem path="forms.filter.capacity" className={styles('title-content')} />
            <div className={styles('filter-sub-content')}>
              <Field
                component={ProjectInput}
                name="maxCapacity"
                inputType="number"
                min={1}
                placeholder="forms.filter.chooseCapacity"
                customClassName={styles('filter-full')}
                fieldWrapperClassName={styles('filter-item')}
              />
            </div>
            {confirmSection}
          </Dropdown>
        </div>
        <div className={styles('filter')}>
          <Dropdown
            noArrow
            forceClose={workspace.loading}
            className={styles('filter-item')}
            contentClass={styles('filter-content')}
            label="forms.filter.type"
            fixedMobile
            indic={values.meeting || values.individual || values.open}
          >
            <TextItem path="forms.filter.chooseType" className={styles('title-content')} />
            <div className={styles('filter-sub-content')}>
              <Field
                noMargin
                component={ProjectInput}
                seed="checkbox"
                name="meeting"
                type="checkbox"
                label="lists.workspaceType.meeting"
                requiredClassName={styles('required')}
              />
              <Field
                component={ProjectInput}
                seed="checkbox"
                name="individual"
                type="checkbox"
                label="lists.workspaceType.individual"
                requiredClassName={styles('required')}
              />
              <Field
                component={ProjectInput}
                seed="checkbox"
                name="open"
                type="checkbox"
                label="lists.workspaceType.open"
                requiredClassName={styles('required')}
              />
            </div>
            {confirmSection}
          </Dropdown>
        </div>
        {/* <div className={styles('filter')}>
          <Dropdown
            noArrow
            className={styles('filter-item')}
            contentClass={styles('filter-content')}
            selectorClass={styles('filter-selector')}
            item="Notes"
          >
            <TextItem path="forms.filter.chooseRating" className={styles('title-content')} />
            <div className={styles('filter-sub-content')}>
              <div className={styles('indication')}>
                <div className={styles('min')}>1</div>
                <div className={styles('max')}>5</div>
              </div>
              {Slider && (
                <>
                  <Slider
                    // defaultValue={}
                    min={1}
                    max={5}
                    onChange={handleNote}
                    className={styles('range')}
                    trackStyle={[{ backgroundColor: '#5fb77d' }, { backgroundColor: '#5fb77d' }]}
                    handleStyle={[{ borderColor: '#5fb77d' }, { borderColor: '#5fb77d' }]}
                    railStyle={{ backgroundColor: '#c9ccd0' }}
                  />
                </>
              )}
            </div>
            {confirmSection}
          </Dropdown>
        </div> */}
      </div>
    </form>
  );
};

export default FiltersForm;
