import React, { FC } from 'react';
import {
  Alert,
  AlertIcon,
  Heading,
  HStack,
  UnorderedList,
  VStack,
  ListItem,
  Text,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

import { Order } from '../../../models/landing';
import { formatDatetime } from '../../../lib';
import { carBodySelectOptions } from '../../order-form/form/car-body/helper';

import { OrderStatus } from './status';

type OrderDetailsProps = Pick<
  Order.View,
  | 'orderNumber'
  | 'status'
  | 'phone'
  | 'carNumber'
  | 'carBody'
  | 'carColor'
  | 'location'
  | 'startWashTime'
  | 'endWashTime'
  | 'created'
>;

export const OrderDetails: FC<OrderDetailsProps> = ({
  orderNumber,
  status,
  phone,
  carNumber,
  carBody,
  carColor,
  location,
  startWashTime,
  endWashTime,
  ...props
}) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.order-view.details',
  });
  const { t: tCarBody } = useTranslation('~', {
    keyPrefix: 'dry-wash.order-create.car-body-select.options',
  });

  return (
    <VStack p={4} alignItems='flex-start' gap={4} {...props}>
      <HStack
        width='full'
        flexWrap='wrap'
        justifyContent='space-between'
        gap={2}
      >
        <Heading as='h2' size='lg'>
          {t('title', { number: orderNumber })}
        </Heading>
        <OrderStatus value={status} />
      </HStack>
      <UnorderedList styleType='none'>
        {[
          {
            label: t('owner'),
            value: phone,
          },
          {
            label: t('car'),
            value: [
              carNumber,
              tCarBody(
                `${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
              ),
              carColor,
            ]
              .filter((v) => v)
              .join(', '),
          },
          {
            label: t('location'),
            value: location,
          },
          {
            label: t('datetime-range'),
            value: [
              formatDatetime(startWashTime),
              formatDatetime(endWashTime),
            ].join(' - '),
          },
        ].map(({ label, value }, i) => (
          <ListItem key={i}>
            {label}:{' '}
            <Text as='span' color='primary.500' fontWeight='bold'>
              {value}
            </Text>
          </ListItem>
        ))}
      </UnorderedList>
      <Alert status='info' alignItems='flex-start'>
        <AlertIcon />
        {t('alert')}
      </Alert>
    </VStack>
  );
};

// todo: add i18n for date & time