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 ProjectInput from 'components/formItems/ProjectInput';
import Button from 'components/items/Button';
import { required, email, minValue, maxValue, composeValidators } from 'store/utils/validation';
import GeoLocInput from 'components/formItems/GeoLocInput';
import { capacities } from 'config/general';
import AddressFields from 'components/formItems/AddressFields';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './editInfoWorkSpaceForm.scss';

// assets
import light from './assets/light.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

const min0 = minValue(0);
const min1 = minValue(1);
const max6 = maxValue(6);
const max12 = maxValue(12);
const max14 = maxValue(14);

export type EditInfoWorkSpaceFormProps = StateProps & DispatchProps & OwnProps;

const EditInfoWorkSpaceForm = (props: EditInfoWorkSpaceFormProps) => {
  // const { handleSubmit, submitting, valid } = props;

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

  return (
    <div className={styles('EditInfoWorkSpaceForm')}>
      <div className={styles('row')}>
        <div className={styles('column')}>
          <Field
            noMargin
            component={ProjectInput}
            name="title"
            label="pages.workspaceDetail.workspaceName"
          />
          <div className={styles('inline')}>
            <Field
              component={ProjectInput}
              seed="select"
              name="workspaceType"
              label="pages.workspaceDetail.workspaceType"
              items="lists.workspaceType"
              validate={required}
            />
            <Field
              component={ProjectInput}
              name="pricingPerHour"
              label="pages.workspaceDetail.details.priceHour"
              inputType="number"
              min={0}
              validate={composeValidators(required, min0)}
            />
          </div>
          <div className={styles('inline')}>
            <Field
              component={ProjectInput}
              name="maxCapacity"
              // seed="select"
              label="pages.workspaceDetail.details.capacity.capacity"
              validate={composeValidators(required, min1)}
              inputType="number"
              min={1}
            />
            <Field
              component={ProjectInput}
              name="minStay"
              type="select"
              label="pages.workspaceDetail.details.locationMin"
              inputType="number"
              min={1}
              max={6}
              validate={composeValidators(required, min1, max6)}
            />
          </div>
          <Field
            component={ProjectInput}
            name="content"
            autoResize="200"
            rows="3"
            type="textarea"
            seed="textarea"
            label="pages.workspaceDetail.Description"
          />
        </div>
        <div className={styles('column')}>
          <AddressFields noMargin base="address." />
          <TextItem
            tag="div"
            className={styles('disclaimer')}
            path="pages.workspaceDetail.addressDisclaimer"
          />
        </div>
      </div>
    </div>
  );
};

export default EditInfoWorkSpaceForm;
