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';
import { useStore } from '@/shared/model/store';

export const RegistrationStatusWrap = () => {
  const userMids = useStore.getState().UserStore.userMids;
  const midOptions = useStore.getState().UserStore.selectOptionsMids;

  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 = (selectedMid: string) => {
    let params: MerchantMidStatusParams = {
      mid: selectedMid
    };
    merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
      setOnlineInfomation(rs.onlineInfomation);
      setOfflineInfomation(rs.offlineInfomation);
      setCardApplications(rs.cardApplications);
      setEscrow(rs.escrow);
    });
  };

  const onChangeMid = (value: string) => {
    callInfo(value);
  };

  useEffect(() => {
    if(userMids[0]){
      callInfo(userMids[0]);
    }
  }, []);

  return (
    <>
      <div className="input-wrapper top-select mt-30">
        <select
          onChange={ (e) => onChangeMid(e.target.value) }
        >
        { 
          midOptions.map((value, index) => (
            <option
              key={ value.value }
              value={ value.value }
            >{ value.name }</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>
    </>
  );
};