import { useEffect, useState } from 'react';
import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation';
import { BusinessInfoWrap } from './info-wrap/business-info-wrap';
import { ManagerInfoWrap } from './info-wrap/manager-info-wrap';
import { AccountInfoWrap } from './info-wrap/account-info-wrap';
import {
  InfoWrapKeys,
  MerchantMidParams,
  MerchantMidResponse
} from '../model/types';

export const InfoWrap = () => {

  const [mid, setMid] = useState<string>('nictest001m');
  const [data, setData] = useState<MerchantMidResponse>();

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

  const callInfo = () => {
    let params: MerchantMidParams = {
      mid: mid,
    };
    merchantMid(params).then((rs: MerchantMidResponse) => {
      setData(rs);
    });
  };

  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">
        <BusinessInfoWrap
          data={ data }
        ></BusinessInfoWrap>
        <div className="info-divider mb-16"></div>
        <ManagerInfoWrap
          type={ InfoWrapKeys.Merchant }
          title='계약 담당자'
          manager={ data?.merchantManager }
          managerTelephone={ data?.merchantManagerTelephone }
          managetEmail={ data?.merchantManagerEmail }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></ManagerInfoWrap>
        <div className="info-divider mb-16"></div>
        <ManagerInfoWrap
          type={ InfoWrapKeys.Technical }
          title='기술 담당자'
          manager={ data?.technicalManager }
          managerTelephone={ data?.technicalManagerTelephone }
          managetEmail={ data?.technicalManagerEmail }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></ManagerInfoWrap>
        <div className="info-divider mb-16"></div>
        <ManagerInfoWrap
          type={ InfoWrapKeys.Settlement }
          title='정산 담당자'
          manager={ data?.settlementManager }
          managerTelephone={ data?.settlementManagerTelephone }
          managetEmail={ data?.settlementManagerEmail }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></ManagerInfoWrap>
        <div className="info-divider mb-16"></div>
        <AccountInfoWrap
          data={ data }
        ></AccountInfoWrap>
        <div className="notice-bottom left-align">
          <p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
        </div>
      </div>
    </>
  );
};