import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation';
import { BusinessSection } from './section/business-section';
import { ManagerSection } from './section/manager-section';
import { AccountSection } from './section/account-section';
import {
  SectionKeys,
  MerchantMidParams,
  MerchantMidResponse
} from '../model/types';
import { useStore } from '@/shared/model/store';
import { showAlert } from '@/widgets/show-alert';

export const InfoWrap = () => {
  const { t } = useTranslation();
  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
  const userMid = useStore.getState().UserStore.mid;
  let midItem = midOptionsWithoutGids.filter((value, index) => {
    return value.value === userMid;
  });

  const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
  const [data, setData] = useState<MerchantMidResponse>();

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

  const callInfo = () => {
    let params: MerchantMidParams = {
      mid: mid
    };
    merchantMid(params).then((rs: MerchantMidResponse) => {
      setData(rs);
    }).catch((e: any) => {
      if(e.response?.data?.error?.message){
        showAlert(e.response?.data?.error?.message);
        return;
      }
    });
  };

  useEffect(() => {
    if(!!mid){
      callInfo();
    }
  }, [mid]);

  return (
    <>
      <div className="input-wrapper top-select mt-30">
        <select
          value={ mid }
          onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
        >
        { 
          midOptionsWithoutGids.map((value, index) => (
            <option
              key={ value.value }
              value={ value.value }
            >{ value.name }</option>
          )) 
        }  
        </select>
      </div>

      <div className="merchant-info">
        <BusinessSection
          data={ data }
        ></BusinessSection>
        <div className="info-divider mb-16"></div>
        <ManagerSection
          type={ SectionKeys.Merchant }
          title={t('merchant.contractManager')}
          manager={ data?.merchantManager }
          managerTelephone={ data?.merchantManagerTelephone }
          managetEmail={ data?.merchantManagerEmail }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></ManagerSection>
        <div className="info-divider mb-16"></div>
        <ManagerSection
          type={ SectionKeys.Technical }
          title={t('merchant.technicalManager')}
          manager={ data?.technicalManager }
          managerTelephone={ data?.technicalManagerTelephone }
          managetEmail={ data?.technicalManagerEmail }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></ManagerSection>
        <div className="info-divider mb-16"></div>
        <ManagerSection
          type={ SectionKeys.Settlement }
          title={t('merchant.settlementManager')}
          manager={ data?.settlementManager }
          managerTelephone={ data?.settlementManagerTelephone }
          managetEmail={ data?.settlementManagerEmail }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></ManagerSection>
        <div className="info-divider mb-16"></div>
        <AccountSection
          data={ data }
        ></AccountSection>
        <div className="notice-bottom left-align">
          <p className="notice-tip">{t('merchant.infoNotice')}</p>
        </div>
      </div>
    </>
  );
};