import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';

export interface TransferCommissionBottomSheetProps {
  itemKey: string;
  settlementPeriod?: string;
  transferCommissionBottomSheetOn: boolean;
  setTransferCommissionBottomSheetOn: (transferCommissionBottomSheetOn: boolean) => void;
};

export const TransferCommissionBottomSheet = ({
  itemKey,
  settlementPeriod,
  transferCommissionBottomSheetOn,
  setTransferCommissionBottomSheetOn
}: TransferCommissionBottomSheetProps) => {
  const { t, i18n } = useTranslation();

  const onClickToClose = () => {
    setTransferCommissionBottomSheetOn(false);
  };

  return (
    <>
      <div className="bg-dim"></div>
      <div className="bottomsheet">
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>{t('payment.commissionAndSettlement')}</h2>
            <button
              className="close-btn"
              type="button"
            >
              <img
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt={t('common.close')}
                onClick={ onClickToClose }
              />
            </button>
          </div>
        </div>
        <div className="bottomsheet-content">
          <div className="card-fee">
            <div className="desc">{t('payment.settlementPeriod')} : { settlementPeriod }</div>
            <div 
              className="desc"
              style={{ paddingBottom: 0 }}
            >수수료 :</div>
            { (itemKey === 'accountTransfer') &&
              <div className="card-fee-list">
                <div className="card-fee-list-header">
                  <span className="th-left">구간</span>
                  <span className="th-right">수수료</span>
                </div>
                <div className="card-fee-row">
                  <span>&nbsp;</span>
                  <span>&nbsp;</span>
                </div>
              </div>
            }
            { (itemKey === 'virtualAccount') &&
              <div className="card-fee-list">
                <div className="card-fee-list-header">
                  <span className="th-left">은행</span>
                  <span className="th-right">수수료</span>
                </div>
                <div className="card-fee-row">
                  <span>&nbsp;</span>
                  <span>&nbsp;</span>
                </div>
              </div>
            }
            { (itemKey === 'livePay' || itemKey === 'kBankPay') &&
              <div className="card-fee-list">
                <div className="card-fee-list-header">
                  <span className="th-left">결제수수료</span>
                  <span className="th-right">최저수수료</span>
                </div>
                <div className="card-fee-row">
                  <span>&nbsp;</span>
                  <span>&nbsp;</span>
                </div>
              </div>
            }
            { (itemKey === 'mobilePaymentFull') &&
              <div className="card-fee-list">
                <div className="card-fee-list-header">
                  <span className="th-left">구분</span>
                  <span className="th-right">수수료</span>
                </div>
                <div className="card-fee-row">
                  <span>&nbsp;</span>
                  <span>&nbsp;</span>
                </div>
              </div>
            }
            { (itemKey === 'accountSimplePayment') &&
              <div className="card-fee-list">
                <div className="card-fee-list-header">
                  <span className="th-left">결제수수료</span>
                  <span className="th-right">취소수수료</span>
                </div>
                <div className="card-fee-row">
                  <span>최저수수료</span>
                  <span>1원~</span>
                  <span>1원~</span>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </>
  );
};