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

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

// 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 styleIdentifiers from './editAssetWorkSpaceForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type EditAssetWorkSpaceFormProps = StateProps & DispatchProps & OwnProps;

const EditAssetWorkSpaceForm = (props: EditAssetWorkSpaceFormProps) => {
  const { handleSubmit, submitting, valid, history } = props;

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

  return (
    <form className={styles('EditAssetWorkSpaceForm')} onSubmit={handleSubmit}>
      <div className={styles('inline')}>
        <h2>
          <TextItem path="pages.workspaceDetail.secondaryPictures" />
        </h2>
        <div className={styles('wrapper-item')}>
          <div className={styles('item')}>
            <Field
              component={ProjectInput}
              name="assetGrid1"
              seed="upload"
              validate={required}
              customClassName={styles('custom-dropzone')}
              uploadPreviewClassName={styles('custom-preview')}
            />
          </div>
          <div className={styles('item')}>
            <Field
              component={ProjectInput}
              name="assetGrid2"
              seed="upload"
              validate={required}
              customClassName={styles('custom-dropzone')}
              uploadPreviewClassName={styles('custom-preview')}
            />
          </div>
          <div className={styles('item')}>
            <Field
              component={ProjectInput}
              name="assetGrid3"
              seed="upload"
              validate={required}
              customClassName={styles('custom-dropzone')}
              uploadPreviewClassName={styles('custom-preview')}
            />
          </div>
          <div className={styles('item')}>
            <Field
              component={ProjectInput}
              name="assetGrid4"
              seed="upload"
              validate={required}
              customClassName={styles('custom-dropzone')}
              uploadPreviewClassName={styles('custom-preview')}
            />
          </div>
        </div>
      </div>
      <div className={styles('actions')}>
        <ProjectButton
          color="border-secondary"
          label="general.actions.cancel"
          type="submit"
          customClassName={styles('button')}
          action={() => history.goBack()}
        />
        <ProjectButton
          color="primary"
          label="general.actions.save"
          type="submit"
          customClassName={styles('button')}
        />
      </div>
    </form>
  );
};

export default EditAssetWorkSpaceForm;
