import { useTranslation } from 'react-i18next';
import { InfoSectionProps } from '../../model/types';
import moment from 'moment';
import { useEffect, useState } from 'react';

export const IssueInfoSection = ({
  transactionCategory,
  issueInfo,
  purposeType,
}: InfoSectionProps) => {
  const { t } = useTranslation();
  const [issueDateTime, setIssueDateTime] = useState<string>('');

  useEffect(() => {
    let issueDate = issueInfo?.issueDate;
    let issueTime = issueInfo?.issueTime;
    if(issueDate && issueTime){
      let date = issueDate.substr(0, 4) + '-' + issueDate.substr(4, 2) + '-' + issueDate.substr(6, 2);
      let time = issueTime.substr(0, 2) + ':' + issueTime.substr(2, 2) + ':' + issueTime.substr(4, 2);
      setIssueDateTime(date + ' '+ time);
    }
  }, [issueInfo]);

  return (
    <>
      <div className="txn-section">
        <div className="section-title">{t('transaction.sections.issueInfo')}</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{t('transaction.fields.approvalNumber')}</span>
            <span className="v">{ issueInfo?.approvalNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.issueNumber')}</span>
            <span className="v">{ issueInfo?.issueNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.issueDateTime')}</span>
            <span className="v">{ moment(issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.purpose')}</span>
            <span className="v">{ issueInfo?.purpose }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.paymentMethod')}</span>
            <span className="v">{ issueInfo?.paymentMethod }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.productName')}</span>
            <span className="v">{ issueInfo?.productName }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.processResult')}</span>
            <span className="v">{ issueInfo?.processResult }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('transaction.fields.transactionType')}</span>
            <span className="v">{ issueInfo?.transactionType }</span>
          </li>
        </ul>
      </div>
    </>
  )
};