import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMerchantMidStatusMutation } from '../api/use-merchant-mid-status-mutation';
import {
  CardApplications,
  Escrow,
  SectionKeys,
  MerchantMidStatusParams,
  MerchantMidStatusResponse,
  OfflineInfomation,
  OnlineInfomation
} from '../model/types';
import { OnlineSection } from './section/online-section';
import { CardSection } from './section/card-section';
import { EscrowSection } from './section/escrow-section';
import { useStore } from '@/shared/model/store';

export const RegistrationStatusWrap = () => {
  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 [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
  const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
  const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
  const [escrow, setEscrow] = useState<Escrow>();

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

  const callInfo = () => {
    let params: MerchantMidStatusParams = {
      mid: mid
    };
    merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
      setOnlineInfomation(rs.onlineInfomation);
      setOfflineInfomation(rs.offlineInfomation);
      setCardApplications(rs.cardApplications);
      setEscrow(rs.escrow);
    });
  };

  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">
        <OnlineSection
          data={ onlineInfomation }
        ></OnlineSection>
        <div className="info-divider mb-16"></div>
        <CardSection
          type={ SectionKeys.Card }
          title={t('merchant.cardReviewStatus')}
          cardApplications={ cardApplications }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></CardSection>
        <div className="info-divider mb-16"></div>
        <EscrowSection
          type={ SectionKeys.Escrow }
          title={t('merchant.escrowRegistrationStatus')}
          companyName={ escrow?.companyName }
          businessRegistrationNumber={ escrow?.businessRegistrationNumber }
          escrowStatus={ escrow?.escrowStatus }
          address={ escrow?.address }
          merchantUrl={ escrow?.merchantUrl }
          serviceRegistrationNumber={ escrow?.serviceRegistrationNumber }
          openChild={ openChild }
          setOpenChild={ setOpenChild }
        ></EscrowSection>
      </div>
    </>
  );
};