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

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

  const [data, setData] = useState<MerchantMidResponse>();

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

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

  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">
        <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>
    </>
  );
};