import moment from 'moment';
import { NumericFormat } from 'react-number-format';
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 onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Settlement);
    }
  };

  return (
    <>
      <div className="txn-section">
        <div 
          className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
          정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">MID</span>
              <span className="v">{ settlementInfo?.mid }</span>
            </li>
            <li className="kv-row">
              <span className="k">이체상태</span>
              <span className="v">{ settlementInfo?.transferStatus }</span>
            </li>
            <li className="kv-row">
              <span className="k">이체ID</span>
              <span className="v">{ settlementInfo?.transferId }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">이체시간</span>
              <span className="v">{ moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">은행명</span>
              <span className="v">{ settlementInfo?.bankName }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">계좌번호</span>
              <span className="v">{ settlementInfo?.accountNumber }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">입금인자</span>
              <span className="v">{ settlementInfo?.depositorName }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">정상입금액</span>
              <span className="v">
                <NumericFormat
                  value={ settlementInfo?.settlementDepositAmount } 
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">오류사유</span>
              <span className="v">{ settlementInfo?.errorReason }</span>
            </li>
          </ul>
        }
        </SlideDown>
      </div>
    </>
  );
};