import { useEffect, useState } from 'react';
import { useBusinessMemberInfoMutation } from '../api/use-business-member-info-mutation';
import { InfoBasicInfo } from './info-basic-info';
import { InfoOwnerInfo } from './info-owner-info';
import { InfoCompanyInfo } from './info-company-info';
import { InfoContractManager } from './info-contract-manager';
import { InfoTechnicalManager } from './info-technical-manager';
import { InfoSettlementManager } from './info-settlement-manager';
import { InfoSettlementAccount } from './info-settlement-account';
import {
  BusinessMemberInfoParams,
  BusinessMemberInfoResponse,
  InfoContractManagerProps,
  InfoTechnicalManagerProps,
  InfoSettlementManagerProps,
  InfoSettlementAccountProps,
  BusinessMemberInfoKeys
} from '../model/types';

export const InfoWrap = () => {
  const [infoContractManager, setInfoContractManager] = useState<InfoContractManagerProps>();
  const [infoTechnicalManager, setInfoTechnicalManager] = useState<InfoTechnicalManagerProps>();
  const [infoSettlementManager, setInfoSettlementManager] = useState<InfoSettlementManagerProps>();
  const [infoSettlementAccount, setInfoSettlementAccount] = useState<InfoSettlementAccountProps>();
  const [showInfoContractManager, setShowInfoContractManager] = useState<boolean>(false);
  const [showInfoTechnicalManager, setShowInfoTechnicalManager] = useState<boolean>(false);
  const [showInfoSettlementManager, setShowInfoSettlementManager] = useState<boolean>(false);
  const [showInfoSettlementAccount, setShowInfoSettlemenAccount] = useState<boolean>(false);

  const { mutateAsync: businessMemberInfo } = useBusinessMemberInfoMutation();

  const callInfo = () => {
    let businessMemberInfoParams: BusinessMemberInfoParams = {
      svcCd: 'st',
    };
    businessMemberInfo(businessMemberInfoParams).then((rs: BusinessMemberInfoResponse) => {
      setInfoContractManager(rs.infoContractManager);
      setInfoTechnicalManager(rs.infoTechnicalManager);
      setInfoSettlementManager(rs.infoSettlementManager);
      setInfoSettlementAccount(rs.infoSettlementAccount);
    });
  };

  const onClickToShowInfo = (info: BusinessMemberInfoKeys) => {
    if(info === BusinessMemberInfoKeys.InfoContractManager){
      setShowInfoContractManager(!showInfoContractManager);
    }
    else if(info === BusinessMemberInfoKeys.InfoTechnicalManager){
      setShowInfoTechnicalManager(!showInfoTechnicalManager);
    }
    else if(info === BusinessMemberInfoKeys.InfoSettlementManager){
      setShowInfoSettlementManager(!showInfoSettlementManager);
    }
    else if(info === BusinessMemberInfoKeys.InfoSettlementAccount){
      setShowInfoSettlemenAccount(!showInfoSettlementAccount);
    }
  };

  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">
        <InfoBasicInfo></InfoBasicInfo>
        <div className="info-divider mb-16"></div>

        <InfoOwnerInfo></InfoOwnerInfo>

        <div className="info-divider mb-16"></div>

        <InfoCompanyInfo></InfoCompanyInfo>

        <div className="info-divider mb-16"></div>

        <InfoContractManager
          infoContractManager={ infoContractManager }
          show={ showInfoContractManager }
          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
        ></InfoContractManager>

        <div className="info-divider mb-16"></div>

        <InfoTechnicalManager
          infoTechnicalManager={ infoTechnicalManager }
          show={ showInfoTechnicalManager }
          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
        ></InfoTechnicalManager>

        <div className="info-divider mb-16"></div>

        <InfoSettlementManager
          infoSettlementManager={ infoSettlementManager }
          show={ showInfoSettlementManager }
          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
        ></InfoSettlementManager>

        <div className="info-divider mb-16"></div>

        <InfoSettlementAccount
          infoSettlementManager={ infoSettlementAccount }
          show={ showInfoSettlementAccount }
          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
        ></InfoSettlementAccount>

        <div className="notice-bottom left-align">
          <p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
        </div>
      </div>
    </>
  );
};