import React, { FC, useEffect } from 'react';
import { HStack, Spinner, useToast } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { Container, Heading, VStack } from '@chakra-ui/react';
import { useParams } from 'react-router-dom';

import { LandingThemeProvider } from '../../containers';
import { OrderDetails } from '../../components/order-view';

import { useFetchOrderDetails } from './helper';

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

  const { orderId } = useParams();

  const { isLoading, data, error } = useFetchOrderDetails({ orderId });

  const toast = useToast();
  useEffect(() => {
    if (error) {
      toast({
        title: t('error.title'),
        description: t('fetch.error'),
        status: 'error',
        duration: 5000,
        isClosable: true,
        position: 'bottom-right',
      });
    }
  }, [error]);

  return (
    <LandingThemeProvider>
      <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>
          {isLoading ? (
            <HStack width='full' justifyContent='center'>
              <Spinner size='lg' />
            </HStack>
          ) : (
            data && (
              <OrderDetails
                id={data.id}
                orderDate={data.orderDate}
                status={data.status}
                phone={data.phone}
                carNumber={data.carNumber}
                carBody={data.carBody}
                carColor={data.carColor}
                location={data.location}
                datetimeBegin={data.startWashTime}
                datetimeEnd={data.endWashTime}
              />
            )
          )}
        </VStack>
      </Container>
    </LandingThemeProvider>
  );
};

export default Page;