import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Container, Heading, VStack } from '@chakra-ui/react';

import { withLandingThemeProvider } from '../../containers';
import { OrderForm, OrderFormProps } from '../../components/order-form';
import { landingApi } from '../../__data__/service/landing.api';

import {
  formatFormValues,
  useHandleCreateOrderMutationResponse,
} from './helper';

const Page: FC = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.order-create',
  });

  const [createOrder, createOrderMutation] =
    landingApi.useCreateOrderMutation();
  useHandleCreateOrderMutationResponse(createOrderMutation);

  const onOrderFormSubmit: OrderFormProps['onSubmit'] = (values) => {
    createOrder({ body: formatFormValues(values) });
  };

  return (
    <Container
      w='full'
      maxWidth='container.xl'
      minH='100vh'
      padding={0}
      bg='white'
      centerContent
    >
      <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
        <Heading textAlign='center' mt={4}>
          {t('title')}
        </Heading>
        <OrderForm
          onSubmit={onOrderFormSubmit}
          loading={createOrderMutation.isLoading}
        />
      </VStack>
    </Container>
  );
};

export default withLandingThemeProvider(Page);
