import { IMAGE_ROOT } from '@/shared/constants/common';
import { AllTransactionCancelInfoResponse } from '../model/types';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';

export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
  serviceCode: string;
  cancelPassword: string;
  setCancelPassword: (cancelPassword: string) => void;
  bankCode?: string;
  setBankCode?: (BankCode: string) => void;
  accountNo?: string;
  setAccountNo?: (accountNo: string) => void;
  accountHolder?: string;
  setAccountHolder?: (accountHolder: string) => void;
  requestSuccess: boolean;
  totalCancelAmount: number;
};

export const AllTransactionAllCancel = ({
  serviceCode,
  debtPreventionCancelDisplayInfo,
  debtPreventionCancelRequestInfo,
  goodsVat,
  isCompoundTax,
  isConditionalVatAutoCalcMerchant,
  isNpg,
  isVatAutoCalcMerchant,
  isVatDisplayed,
  partCancelCl,
  remainAmount,
  serviceAmount,
  supplyAmount,
  taxFreeAmount,
  vatAutoCalcSummary,
  cancelPassword,
  setCancelPassword,
  bankCode,
  setBankCode,
  accountNo,
  setAccountNo,
  accountHolder,
  setAccountHolder,
  requestSuccess,
  totalCancelAmount
}: AllTransactionAllCancelProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="amount-info">
        <ul className="amount-list">
          <li className="amount-item">
            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
            <span className="value">
              <NumericFormat
                value={ remainAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat>
            </span>
          </li>
          <li className="amount-item">
            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
            <span className="value">
              <NumericFormat
                value={ totalCancelAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat>
            </span>
          </li>
        </ul>
      </div>
      <div className="form-section">
        <AllTransactionCancelSectionPasswordGroup
          cancelPassword={ cancelPassword }
          setCancelPassword={ setCancelPassword }
          requestSuccess={ requestSuccess }
        ></AllTransactionCancelSectionPasswordGroup>
        { serviceCode === '03' &&
          <AllTransactionCancelSectionBankGroup
            bankCode={ bankCode }
            setBankCode={ setBankCode }
            accountNo={ accountNo }
            setAccountNo={ setAccountNo }
            accountHolder={ accountHolder }
            setAccountHolder={ setAccountHolder }
          ></AllTransactionCancelSectionBankGroup>
        }
      </div>
    </>
  );
};