import React from 'react';

// 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';
import { addTimezone, getTime } from '../utils/dates';

const OrderDetails = (props: KDSOrderDetailsProps): JSX.Element => {
  const {
    queuePos,
    lines,
    lastChanged,
    orderType,
    payments,
    orderId,
    kdsDeviceConfigs,
  } = props;
  const { t } = useTranslation();
  const getOrderTypeName = () => {
    // console.log('getOrderTypeName: ', {
    //   orderType,
    //   name: orderType.replaceAll('_', ' '),
    // });
    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 orderType.replaceAll('_', ' ');
    }
  };

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

export default OrderDetails;