import { Tag, TagProps } from '@chakra-ui/react';
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { TFunction } from 'i18next';

import { Order } from '../../../../models/landing';

const getPropsByStatus = (
  status: Order.Status,
  t: TFunction<'~', 'dry-wash.arm.order.status'>,
): TagProps => {
  switch (status) {
    case 'canceled':
      return {
        colorScheme: 'red',
        children: t('canceled'),
      };
    case 'progress':
      return {
        colorScheme: 'yellow',
        children: t('progress'),
      };
    case 'pending':
      return {
        colorScheme: 'yellow',
        children: t('pending'),
      };
    case 'working':
      return {
        colorScheme: 'yellow',
        children: t('working'),
      };
    case 'complete':
      return {
        colorScheme: 'green',
        children: t('complete'),
      };
  }
};

export const OrderStatus: FC<{ value: Order.Status }> = ({ value }) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.order.status',
  });

  const props = getPropsByStatus(value, t);

  return <Tag variant='solid' {...props} />;
};
