import { useTranslation } from 'react-i18next';
import { useStore } from "@/shared/model/store";
import { ChangeEvent, useState } from "react";

export interface AllTransactionCancelSectionBankGroupProps {
  bankCode?: string;
  setBankCode?: (BankCode: string) => void;
  accountNo?: string;
  setAccountNo?: (accountNo: string) => void;
  accountHolder?: string;
  setAccountHolder?: (accountHolder: string) => void;
};
export const AllTransactionCancelSectionBankGroup = ({
  bankCode,
  setBankCode,
  accountNo,
  setAccountNo,
  accountHolder,
  setAccountHolder
}: AllTransactionCancelSectionBankGroupProps ) => {
  const { t } = useTranslation();
  let bankList = useStore.getState().CommonStore.virtualBankList;
  bankList = bankList.filter((value, index) => value.code1 !== '****');
  
  const [newBankCode, setNewBankCode] = useState<string | undefined>(bankCode);
  const [newAccountNo, setNewAccountNo] = useState<string | undefined>(accountNo);
  const [newAccountHolder, setNewAccountHolder] = useState<string | undefined>(accountHolder);

  const onChangeNewBankCode = (value: string) => {
    setNewBankCode(value);
  };
  const onChangeNewAccountNo = (value: string) => {
    setNewAccountNo(value);
  };
  const onChangeNewAccountHolder = (value: string) => {
    setNewAccountHolder(value);
  };

  return (
    <>
      <div className="form-group">
        <label className="form-label">{t('transaction.fields.bank')}</label>
        <div className="input-wrapper wid-100">
          <select
            className="wid-100 align-right"
            value={ bankCode }
            onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) }
          >
            <option value="">{t('transaction.cancel.bankGroup.select')}</option>
            { bankList.map((value, index) => (
                <option value={ value.code1 }>{ value.desc1 }</option>
              ))
            }
          </select>
        </div>
      </div>

      <div className="form-group">
        <label className="form-label">{t('transaction.fields.accountNo')}</label>
        <div className="input-wrapper wid-100">
          <input
            className="form-input wid-100"
            type="text"
            value={ newAccountNo }
            onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountNo(e.target.value) }
          />
        </div>
      </div>

      <div className="form-group">
        <label className="form-label">{t('transaction.fields.accountHolder')}</label>
        <div className="input-wrapper wid-100">
          <input
            className="form-input  wid-100"
            type="text"
            value={ newAccountHolder }
            onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountHolder(e.target.value) }
          />
        </div>
      </div>

      <div className="notice-text wid-100">
        <p>{t('transaction.cancel.bankGroup.notice')}</p>
      </div>
    </>
  );
}