import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { VatReturnDetailResponse } from '../../model/types';

export interface IssueSectionProps {
  detail: VatReturnDetailResponse
};

export const IssueSection = ({
  detail
}: IssueSectionProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="txn-section">
        <div className="section-title">{t('vatReturn.issueInfo')}</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">MID</span>
            <span className="v">{ detail.mid }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('vatReturn.issueTargetDate')}</span>
            <span className="v">
              { !!detail.targetBusinessStartDate && !!detail.targetBusinessEndDate &&
                moment(detail.targetBusinessStartDate).format('YYYY.MM.DD')
                +
                ' ~ '
                +
                moment(detail.targetBusinessEndDate).format('YYYY.MM.DD')
              }
            </span>
          </li>
          <li className="kv-row">
            <span className="k">{t('vatReturn.issueDate')}</span>
            <span className="v">
              { !!detail.issueDate &&
                moment(detail.issueDate).format('YYYY.MM.DD')
              }
            </span>
          </li>
          <li className="kv-row">
            <span className="k">{t('vatReturn.subject')}</span>
            <span className="v">{ detail.subject }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('vatReturn.issueTarget')}</span>
            <span className="v">{ detail.targetType }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('vatReturn.receiptType')}</span>
            <span className="v">{ detail.receiptType }</span>
          </li>
          <li className="kv-row">
            <span className="k">Email</span>
            <span className="v">{ detail.email }</span>
          </li>
        </ul>
      </div>
    </>
  );
};