import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NotifyRowKeys, PaymentNotificationDataParams, PaymentNotificationDataResponse } from '../model/types';
import { usePaymentNotificationDataMutation } from '../api/use-payment-notification-data-mutation';
import { useStore } from '@/shared/model/store';
import { NotifyRow } from './section/notify-row';

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

  const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
  const [merchantInfo, setMerchantInfo] = useState<Record<string, any>>();
  const [creditCard, setCreditCard] = useState<Record<string, any>>();
  const [accountTransfer, setAccountTransfer] = useState<Record<string, any>>();
  const [virtualAccount, setVirtualAccount] = useState<Record<string, any>>();
  const [mobilePayment, setMobilePayment] = useState<Record<string, any>>();
  const [escrowPayment, setEscrowPayment] = useState<Record<string, any>>();

  const [openChild, setOpenChild] = useState<NotifyRowKeys | null>(null);

  const { mutateAsync: paymentNotificationData } = usePaymentNotificationDataMutation();

  const callPaymentNotificationData = () => {
    let params: PaymentNotificationDataParams = {
      mid: mid
    };
      
    paymentNotificationData(params).then((rs: PaymentNotificationDataResponse) => {
      setMerchantInfo(rs?.merchantInfo);
      setCreditCard(rs?.creditCard.detail);
      setAccountTransfer(rs?.accountTransfer.detail);
      setVirtualAccount(rs?.virtualAccount.detail);
      setMobilePayment(rs?.mobilePayment.detail);
      setEscrowPayment(rs?.escrowPayment.detail);
    });
  };
  useEffect(() => {
    if(!!mid){
      callPaymentNotificationData();
    }
  }, [mid]);
  
  return (
    <>
      <div className="ing-list">
        <div className="input-wrapper top-select mt-16">
          <select
            value={ mid }
            onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
          >
          { 
            midOptions.map((value, index) => (
              <option
                key={ value.value }
                value={ value.value }
              >{ value.name }</option>
            )) 
          }  
          </select>
        </div>
        <div className="notify-container">
          <div className="notify-header">
            <h3 className="notify-title">{t('payment.notificationDataInquiry')}</h3>
          </div>
          <ul className="notify-list">
            <li>
              <NotifyRow
                paymentMethodName={t('payment.paymentMethods.creditCard')}
                type={ NotifyRowKeys.CreditCard }
                startDate={ creditCard?.startDate }
                adminEmail={ creditCard?.adminEmail }
                urlIp={ creditCard?.urlIp }
                retransmissionInterval={ creditCard?.retransmissionInterval }
                retransmissionCount={ creditCard?.retransmissionCount }
                okCheck={ creditCard?.okCheck}
                encryptionStatus={ creditCard?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
                ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
              <NotifyRow
                paymentMethodName={t('payment.paymentMethods.accountTransfer')}
                type={ NotifyRowKeys.AccountTransfer }
                startDate={ accountTransfer?.startDate }
                adminEmail={ accountTransfer?.adminEmail }
                urlIp={ accountTransfer?.urlIp }
                retransmissionInterval={ accountTransfer?.retransmissionInterval }
                retransmissionCount={ accountTransfer?.retransmissionCount }
                okCheck={ accountTransfer?.okCheck}
                encryptionStatus={ accountTransfer?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
              <NotifyRow
                paymentMethodName={t('payment.paymentMethods.virtualAccount')}
                type={ NotifyRowKeys.VirtualAccount }
                startDate={ virtualAccount?.startDate }
                adminEmail={ virtualAccount?.adminEmail }
                urlIp={ virtualAccount?.urlIp }
                retransmissionInterval={ virtualAccount?.retransmissionInterval }
                retransmissionCount={ virtualAccount?.retransmissionCount }
                okCheck={ virtualAccount?.okCheck}
                encryptionStatus={ virtualAccount?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
              <NotifyRow
                paymentMethodName={t('payment.paymentMethods.mobilePayment')}
                type={ NotifyRowKeys.MobilePayment }
                startDate={ mobilePayment?.startDate }
                adminEmail={ mobilePayment?.adminEmail }
                urlIp={ mobilePayment?.urlIp }
                retransmissionInterval={ mobilePayment?.retransmissionInterval }
                retransmissionCount={ mobilePayment?.retransmissionCount }
                okCheck={ mobilePayment?.okCheck}
                encryptionStatus={ mobilePayment?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></NotifyRow>
            </li>
            <li className="notify-divider"></li>
            <li>
              <NotifyRow
                paymentMethodName={t('payment.paymentMethods.escrowPayment')}
                type={ NotifyRowKeys.EscrowPayment }
                startDate={ escrowPayment?.startDate }
                adminEmail={ escrowPayment?.adminEmail }
                urlIp={ escrowPayment?.urlIp }
                retransmissionInterval={ escrowPayment?.retransmissionInterval }
                retransmissionCount={ escrowPayment?.retransmissionCount }
                okCheck={ escrowPayment?.okCheck}
                encryptionStatus={ escrowPayment?.encryptionStatus }
                openChild={ openChild }
                setOpenChild={ setOpenChild }
              ></NotifyRow>
            </li>
          </ul>
        </div>
        <div className="notify-bar">
          <span>{t('payment.notificationDataSettingInfo')}</span>
          <span>{t('payment.onlyConfiguredPaymentMethodsShown')}</span>
        </div>
      </div>
    </>
  );
};