import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Container, Heading, VStack } from '@chakra-ui/react';
import { Player as LottiePlayer } from '@lottiefiles/react-lottie-player';

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

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}>
        {createOrderMutation.isUninitialized ? (
          <>
            <Heading textAlign='center' mt={4}>
              {t('title')}
            </Heading>
            <OrderForm
              onSubmit={onOrderFormSubmit}
              loading={createOrderMutation.isLoading}
            />
          </>
        ) : (
          <>
            <LottiePlayer autoplay loop src={OrderCreationAnimation} />
            <Heading textAlign='center' mt={4}>
              {t('order-creation-title')}
            </Heading>
          </>
        )}
      </VStack>
    </Container>
  );
};

export default withLandingThemeProvider(Page);