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

export const TitleInfoWrap = ({
  additionalServiceCategory,
  titleInfo,
  onClickToShowInfo
}: DetailInfoSectionProps) => {

  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">
              <NumericFormat
                value={titleInfo?.amount}
                thousandSeparator
                displayType="text"
                suffix={'원'}
              ></NumericFormat>
            </span>
          </div>
          <div className="num-store">{titleInfo?.corpName}</div>
          <div className="num-day">{titleInfo?.sendDate && moment(titleInfo.sendDate).format('YYYY.MM.DD')}</div>
        </>
      )}
      {/*링크결제_발송대기*/}
      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait && (
        <>
          <>
            <div className="num-amount">
              <span className="amount-text">
                <NumericFormat
                  value={titleInfo?.amount}
                  thousandSeparator
                  displayType="text"
                  suffix={'원'}
                ></NumericFormat>
              </span>
            </div>
            <div className="num-store">{titleInfo?.corpName}</div>
            <div className="num-day">{titleInfo?.scheduledSendDate && moment(titleInfo.scheduledSendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</div>
          </>
        </>
      )}
    </>
  );
};