import { useEffect, useState } from 'react';
import { useMerchantMidStatusMutation } from '../api/use-merchant-mid-status-mutation';
import {
  CardApplications, 
  Escrow, 
  InfoWrapKeys, 
  MerchantMidStatusParams, 
  MerchantMidStatusResponse, 
  OfflineInfomation, 
  OnlineInfomation 
} from '../model/types';
import { OnlineInfoWrap } from './info-wrap/online-info-wrap';
import { CardInfoWrap } from './info-wrap/card-info-wrap';
import { EscrowInfoWrap } from './info-wrap/escrow-info-wrap';

export const RegistrationStatusWrap = () => {

  const [mid, setMid] = useState<string>('nictest001m');
  const [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
  const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
  const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
  const [escrow, setEscrow] = useState<Escrow>();

  const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
  const { mutateAsync: merchantMidStatus } = useMerchantMidStatusMutation();

  const callInfo = () => {
    let params: MerchantMidStatusParams = {
      mid: mid
    };
    merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
      setOnlineInfomation(rs.onlineInfomation);
      setOfflineInfomation(rs.offlineInfomation);
      setCardApplications(rs.cardApplications);
      setEscrow(rs.escrow);
    });
  };

  useEffect(() => {
    // callInfo();
  }, []);

  return (
    <>
      <div className="input-wrapper top-select mt-30">
        <select>
          <option value="1">nicetest00g</option>
          <option value="2">nicetest00g</option>
          <option value="3">nicetest00g</option>
        </select>
      </div>
      <div className="merchant-info">
        <OnlineInfoWrap
          data={ onlineInfomation }
        ></OnlineInfoWrap>
        <div className="info-divider mb-16"></div>
        <CardInfoWrap
          type={ InfoWrapKeys.Card }
          title='신용카드 심사현황'
          cardApplications={ cardApplications }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></CardInfoWrap>
        <div className="info-divider mb-16"></div>
        <EscrowInfoWrap
          type={ InfoWrapKeys.Escrow }
          title='에스크로 가입현황'
          companyName={ escrow?.companyName }
          businessRegistrationNumber={ escrow?.businessRegistrationNumber }
          escrowStatus={ escrow?.escrowStatus }
          address={ escrow?.address }
          merchantUrl={ escrow?.merchantUrl }
          serviceRegistrationNumber={ escrow?.serviceRegistrationNumber }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></EscrowInfoWrap>
      </div>
    </>
  );
};