import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import {
  InfoWrapKeys,
  SettlementInfoWrapProps,
  SettlementPeriodType
} from '../../model/types';

export const SettlementInfoWrap = ({
  settlementInfo,
  isOpen,
  onClickToShowInfo
}: SettlementInfoWrapProps) => {
  const { t } = useTranslation();

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Settlement);
    }
  };

  return (
    <>
      <div className="txn-section">
        <div
          className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
          {t('settlement.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">{t('transaction.fields.mid')}</span>
              <span className="v">{ settlementInfo?.mid }</span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.transferStatus')}</span>
              <span className="v">{ settlementInfo?.transferStatus }</span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.transferId')}</span>
              <span className="v">{ settlementInfo?.transferId }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.transferTime')}</span>
              <span className="v">
                { settlementInfo?.transferTime &&
                  moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss')
                }
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.bankName')}</span>
              <span className="v">{ settlementInfo?.bankName }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.accountNumber')}</span>
              <span className="v">{ settlementInfo?.accountNumber }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.depositorName')}</span>
              <span className="v">{ settlementInfo?.depositorName }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.settlementDepositAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ settlementInfo?.settlementDepositAmount }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.errorReason')}</span>
              <span className="v">{ settlementInfo?.errorReason }</span>
            </li>
          </ul>
        }
        </SlideDown>
      </div>
    </>
  );
};