import React, { useState, useEffect } from 'react';
import { Form, Field } from 'react-final-form';
import arrayMutators from '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 actionsBuilder from 'store/appActions';
import ManageWorkspaceForm from 'components/forms/ManageWorkspaceForm';
import moment from 'moment';
import { pushRoute } from 'store/utils/routes';
import BackButton from 'components/items/BackButton';
import styleIdentifiers from './manageWorkspace.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ManageWorkSpaceProps = StateProps & DispatchProps & OwnProps;

const ManageWorkSpace = (props: ManageWorkSpaceProps) => {
  const {
    history,
    location,
    match: { params },
  } = props;

  // mapStateToProps
  const workspace = useSelector(
    (state: StoreState) => state.workspace.detail && state.workspace.detail.data,
  );

  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const { workspaceUpdate, workspaceAdd, workspaceDetail } = actionsBuilder(dispatch, [
    'update',
    'add',
    'detail',
  ]);

  useEffect(() => {
    if (params.id) {
      workspaceDetail({
        id: params.id,
      });
    }
  }, []);

  const submit = values => {
    if (params.id) {
      workspaceUpdate({
        id: params.id,
        data: {
          input: values,
        },
        callback: () => {
          history.push(
            pushRoute('detailWorkspace.id', lg, {
              id: params.id,
            }),
          );
        },
      });
    } else {
      workspaceAdd({
        data: {
          input: values,
        },
        callback: () => {
          history.push(pushRoute('mySpaces', lg));
        },
      });
    }
  };

  return (
    <div className={styles('manage-workspace')}>
      <div className={styles('container')}>
        <BackButton />

        <Form
          location={location}
          mutators={{
            ...arrayMutators,
          }}
          initialValues={
            (params.id && workspace) || {
              currency: 'eur',
              availability: {
                // TODO: delete => it is used for test
                // dates: {
                //   startDate: new Date(),
                //   endDate: moment()
                //     .add(7, 'days')
                //     .toDate(),
                // },
                hours: [{}],
              },
              // pricingPerHour: '25',
              // maxCapacity: '10',
              // minStay: '1',
              // maxStay: '10',
            }
          }
          onSubmit={submit}
          component={ManageWorkspaceForm}
        />
      </div>
    </div>
  );
};

export default ManageWorkSpace;
