import React from 'react';
import { KDSCardHeaderProps } from '../utils/types';
import { CardHeaderContainer, CardHeaderText } from './style';
import { useTranslation } from 'react-i18next';
import en from 'dayjs/locale/en';
import pl from 'dayjs/locale/pl';
import cs from 'dayjs/locale/cs';
// packages
import dayjs from 'dayjs';
// import 'dayjs/locale/en-ca';

const CardHeader = (props: KDSCardHeaderProps): JSX.Element => {
  const arrayOfAvailableLang = [pl.name, en.name, cs.name];
  const { t } = useTranslation();
  const { due, orderType, verifiedTime } = props;
  const setLang: string | any = arrayOfAvailableLang.find(
    (l) => l === window.GLOBAL_3E_ORDERING_APP.config.lang
  );
  dayjs.locale(setLang);
  let minTime = dayjs(verifiedTime);
  if (due) {
    minTime = dayjs(due);
  }
  let lateOrderDate = '';
  if (dayjs(verifiedTime).date() - dayjs().date() < 0) {
    lateOrderDate = dayjs(verifiedTime).format('DD MMMM YYYY');
  }
  return (
    <CardHeaderContainer>
      <CardHeaderText>
        {orderType === 'DELIVERY'
          ? `${t('OS.KDS.Card.DeliveryType.Delivery')}: `
          : `${t('OS.KDS.Card.DeliveryType.TakeAway')}: `}
        {minTime.format('HH:mm dddd')} <br /> {lateOrderDate}
      </CardHeaderText>
    </CardHeaderContainer>
  );
};

export default CardHeader;