import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
import { DetailInfoSectionProps } from '../../model/types';

export const TitleInfoWrap = ({
  additionalServiceCategory,
  titleInfo,
  onClickToShowInfo
}: DetailInfoSectionProps) => {
  const { t, i18n } = useTranslation();

  const onClickToSetShowInfo = () => {
    if (!!onClickToShowInfo) {
      onClickToShowInfo(DetailInfoSectionKeys.Title);
    }
  };

  const onClickToDownloadConfirmation = () => {

  };

  return (
    <>
      {/* 계좌성명조회*/}
      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch && (
        <>
          <div className="num-amount">
            <span className="amount">{titleInfo?.accountNo}</span>
          </div>
          <div className="num-store">{titleInfo?.bankName}</div>
          <div className="num-day">{titleInfo?.requestDate && moment(titleInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
        </>
      )}
      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth && (
        <>
          <div className="num-amount">
            <span className="amount">{titleInfo?.accountName}</span>
          </div>
          <div className="num-store">{titleInfo?.accountNo}</div>
          <div className="num-day">{titleInfo?.scheduledSendDate && moment(titleInfo.scheduledSendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')} [발송예정일자로 변경 필요]</div>
        </>
      )}
      {/*링크결제_발송내역*/}
      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory && (
        <>
          <div className="num-amount">
            <span className="amount-text">
              {t('home.money', { value: <NumericFormat value={titleInfo?.amount} thousandSeparator displayType="text" /> })}
            </span>
          </div>
          <div className="num-store">{titleInfo?.corpName}</div>
          <div className="num-day">{titleInfo?.sendDate && moment(titleInfo.sendDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</div>
        </>
      )}
      {/*링크결제_발송대기*/}
      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait && (
        <>
          <div className="num-amount">
            <span className="amount-text">
              {t('home.money', { value: <NumericFormat value={titleInfo?.amount} thousandSeparator displayType="text" /> })}
            </span>
          </div>
          <div className="num-store">{titleInfo?.corpName}</div>
          <div className="num-day">{titleInfo?.scheduledSendDate && moment(titleInfo.scheduledSendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</div>
        </>
      )}
    </>
  );
};