import React from 'react';
import { KDSCardHeaderProps } from '../utils/types';
import { CardHeaderContainer, CardHeaderText } from './style';
import { useTranslation } from 'react-i18next';
import pl from 'dayjs/locale/pl';
import en from 'dayjs/locale/en';
import cs from 'dayjs/locale/cs';
// packages
import dayjs from 'dayjs';
import 'dayjs/locale/en-ca';
import { addTimezone, getTime } from '@orderingstack/front-components-common';

const CardHeader = (props: KDSCardHeaderProps): JSX.Element => {
  const arrayOfAvailableLang = [pl.name, en.name, cs.name];
  const { t } = useTranslation();
  const {
    due,
    orderType,
    verifiedTime,
    venueConfig: { channelConstraints, lang },
  } = props;
  const setLang: string | any = arrayOfAvailableLang.find((l) => l === lang);

  let minTime = dayjs(verifiedTime);
  if (due) {
    minTime = dayjs(due);
  }
  return (
    <CardHeaderContainer>
      <CardHeaderText>
        {orderType === 'DELIVERY'
          ? `${t('OS.KDS.Card.DeliveryType.Delivery')}: `
          : `${t('OS.KDS.Card.DeliveryType.TakeAway')}: `}
        {minTime.locale(setLang).format('HH:mm dddd')}
      </CardHeaderText>
    </CardHeaderContainer>
  );
};

export default CardHeader;
