import React from 'react';
import { addTimezone, getTime } from '@orderingstack/front-components-common';

// utils
import { KDSOrderDetailsProps } from '../utils/types';
import { getBackgroundColor, getElements } from '../utils/helperFunctions';
import OrderPayments from '../OrderPayments';
// styles
import {
  OrderDetailsWrapper,
  OrderTimeBlock,
  QueuePosBlock,
  OrderTypeBlock,
  OrderIdBlock,
} from './style';

// translation
import { useTranslation } from 'react-i18next';

const OrderDetails = (props: KDSOrderDetailsProps): JSX.Element => {
  const { queuePos, lines, lastChanged, orderType, payments, orderId } = props;
  const { t } = useTranslation();
  const checkOrderType = () => {
    switch (orderType) {
      case 'TAKE_AWAY':
        return t('OS.KDS.Card.OrderType.SelfPickUp');
      case 'DELIVERY':
        return t('OS.KDS.Card.OrderType.Delivery');
      case 'DINE_IN':
        return t('OS.KDS.Card.OrderType.DineIn');
      default:
        return 'None';
    }
  };

  const { toDone, allDone, toPrepare, toConfirm } = getElements(lines);
  const formattedLastChange = getTime(addTimezone(lastChanged));
  return (
    <>
      <OrderDetailsWrapper>
        <QueuePosBlock
          color={getBackgroundColor(allDone, toDone, toConfirm, toPrepare)}
        >
          No. {` `}
          {queuePos}
        </QueuePosBlock>
        <OrderTimeBlock>{formattedLastChange}</OrderTimeBlock>
        <OrderTypeBlock>{checkOrderType()} </OrderTypeBlock>
        <OrderPayments payments={payments} />
      </OrderDetailsWrapper>
      <OrderIdBlock>
        <strong>ID:</strong> {orderId}
      </OrderIdBlock>
    </>
  );
};

export default OrderDetails;
