import React from 'react';
import intl from 'react-intl-universal';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';

import { useDashboardPageTitle } from 'hooks/state';
import { useItemFormContext, ItemFormProvider } from './ItemFormProvider';

import ItemFormFormik from './ItemFormFormik';

import DashboardCard from 'components/Dashboard/DashboardCard';
import DashboardInsider from 'components/Dashboard/DashboardInsider';

/**
 * Item form dashboard title.
 * @returns {null}
 */
function ItemFormDashboardTitle() {
  // Change page title dispatcher.
  const changePageTitle = useDashboardPageTitle();

  // Item form context.
  const { isNewMode } = useItemFormContext();

  // Changes the page title in new and edit mode.
  React.useEffect(() => {
    isNewMode
      ? changePageTitle(intl.get('new_item'))
      : changePageTitle(intl.get('edit_item_details'));
  }, [changePageTitle, isNewMode]);

  return null;
}

/**
 * Item form page loading state indicator.
 * @returns {JSX}
 */
function ItemFormPageLoading({ children }) {
  const { isFormLoading } = useItemFormContext();

  return (
    <DashboardItemFormPageInsider loading={isFormLoading} name={'item-form'}>
      {children}
    </DashboardItemFormPageInsider>
  );
}

/**
 * Item form of the page.
 * @returns {JSX}
 */
export default function ItemForm({ itemId }) {
  // History context.
  const history = useHistory();

  // Handle the form submit success.
  const handleSubmitSuccess = (values, form, submitPayload) => {
    if (submitPayload.redirect) {
      history.push('/items');
    }
  };
  // Handle cancel button click.
  const handleFormCancel = () => {
    history.goBack();
  };

  return (
    <ItemFormProvider itemId={itemId}>
      <ItemFormDashboardTitle />

      <ItemFormPageLoading>
        <DashboardCard page>
          <ItemFormPageFormik
            onSubmitSuccess={handleSubmitSuccess}
            onCancel={handleFormCancel}
          />
        </DashboardCard>
      </ItemFormPageLoading>
    </ItemFormProvider>
  );
}

const DashboardItemFormPageInsider = styled(DashboardInsider)`
  padding-bottom: 64px;
`;

const ItemFormPageFormik = styled(ItemFormFormik)`
  .page-form {
    &__floating-actions {
      margin-left: -40px;
      margin-right: -40px;
    }
  }
`;