import * as _ from 'lodash-es';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useExtensionAlimtalkSettingDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation';
import { useExtensionAlimtalkSettingSaveMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-save-mutation';
import { 
  AlimtalkSettingFlagKeys,
  ExtensionAlimtalkSettingDetailParams,
  ExtensionAlimtalkSettingDetailResponse,
  ExtensionAlimtalkSettingSaveParams,
  SendMerchantInfo,
  SendUserInfo
} from '@/entities/additional-service/model/alimtalk/types';
import { useEffect, useState } from 'react';
import { AlimTalkSettingServiceRow } from '@/entities/additional-service/ui/alimtalk/setting-service-row';

export const AlimtalkSettingPage = () => {
  const { navigate } = useNavigate();

  const [mid, setMid] = useState<string>('nictest001m');
  
  const [merchantCardApprovalFlag, setMerchantCardApprovalFlag] = useState<boolean>(false);
  const [merchantCardCancelFlag, setMerchantCardCancelFlag] = useState<boolean>(false);
  const [merchantBankApprovalFlag, setMerchantBankApprovalFlag] = useState<boolean>(false);
  const [merchantBankCancelFlag, setMerchantBankCancelFlag] = useState<boolean>(false);
  const [merchantVirtureAccountDepositRequestFlag, setMerchantVirtureAccountDepositRequestFlag] = useState<boolean>(false);
  const [merchantVirtureAccountDepositCompleteFlag, setMerchantVirtureAccountDepositCompleteFlag] = useState<boolean>(false);
  const [merchantVirtureAccountRefundFlag, setMerchantVirtureAccountRefundFlag] = useState<boolean>(false);

  const [userCardApprovalFlag, setUserCardApprovalFlag] = useState<boolean>(false);
  const [userCardCancelFlag, setUserCardCancelFlag] = useState<boolean>(false);
  const [userBankApprovalFlag, setUserBankApprovalFlag] = useState<boolean>(false);
  const [userBankCancelFlag, setUserBankCancelFlag] = useState<boolean>(false);
  const [userVirtureAccountDepositRequestFlag, setUserVirtureAccountDepositRequestFlag] = useState<boolean>(false);
  const [userVirtureAccountDepositCompleteFlag, setUserVirtureAccountDepositCompleteFlag] = useState<boolean>(false);
  const [userVirtureAccountRefundFlag, setUserVirtureAccountRefundFlag] = useState<boolean>(false);

  const { mutateAsync: alimtalkSettingDetail } = useExtensionAlimtalkSettingDetailMutation();
  const { mutateAsync: alimtalkSettingSave } = useExtensionAlimtalkSettingSaveMutation();

  const callSettingDetail = () => {
    let params: ExtensionAlimtalkSettingDetailParams = {
      mid: mid,
    };

    alimtalkSettingDetail(params).then((rs: ExtensionAlimtalkSettingDetailResponse) => {
      let sendMerchantInfo = rs.content[0]?.sendMerchantInfo;
      let sendUserInfo = rs.content[0]?.sendUserInfo;

      if(sendMerchantInfo){
        setMerchantCardApprovalFlag((sendMerchantInfo?.cardApprovalFlag || false));
        setMerchantCardCancelFlag(sendMerchantInfo?.cardCancelFlag || false);
        setMerchantBankApprovalFlag(sendMerchantInfo?.bankApprovalFlag || false);
        setMerchantBankCancelFlag(sendMerchantInfo?.bankCancelFlag || false);
        setMerchantVirtureAccountDepositRequestFlag(sendMerchantInfo?.virtureAccountDepositRequestFlag || false);
        setMerchantVirtureAccountDepositCompleteFlag(sendMerchantInfo?.virtureAccountDepositCompleteFlag || false);
        setMerchantVirtureAccountRefundFlag(sendMerchantInfo?.virtureAccountRefundFlag || false);
      }
      if(sendUserInfo){
        setUserCardApprovalFlag(sendUserInfo?.cardApprovalFlag || false);
        setUserCardCancelFlag(sendUserInfo?.cardCancelFlag || false);
        setUserBankApprovalFlag(sendUserInfo?.bankApprovalFlag || false);
        setUserBankCancelFlag(sendUserInfo?.bankCancelFlag || false);
        setUserVirtureAccountDepositRequestFlag(sendUserInfo?.virtureAccountDepositRequestFlag || false);
        setUserVirtureAccountDepositCompleteFlag(sendUserInfo?.virtureAccountDepositCompleteFlag || false);
        setUserVirtureAccountRefundFlag(sendUserInfo?.virtureAccountRefundFlag || false);
      }
    });
  };

  const callSettingSave = () => {
    let params: ExtensionAlimtalkSettingSaveParams = {  
      mid: mid,
      sendMerchantInfo: {
        cardApprovalFlag: merchantCardApprovalFlag,
        cardCancelFlag: merchantCardCancelFlag,
        bankApprovalFlag: merchantBankApprovalFlag,
        bankCancelFlag: merchantBankCancelFlag,
        virtureAccountDepositRequestFlag: merchantVirtureAccountDepositRequestFlag,
        virtureAccountDepositCompleteFlag: merchantVirtureAccountDepositCompleteFlag,
        virtureAccountRefundFlag: merchantVirtureAccountRefundFlag
      },
      sendUserInfo: {
        cardApprovalFlag: userCardApprovalFlag,
        cardCancelFlag: userCardCancelFlag,
        bankApprovalFlag: userBankApprovalFlag,
        bankCancelFlag: userBankCancelFlag,
        virtureAccountDepositRequestFlag: userVirtureAccountDepositRequestFlag,
        virtureAccountDepositCompleteFlag: userVirtureAccountDepositCompleteFlag,
        virtureAccountRefundFlag: userVirtureAccountRefundFlag
      },
    };
    alimtalkSettingSave(params).then((rs) => {
      console.log(rs);
    });
  };

  useSetHeaderTitle('알림톡 결제통보');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.alimtalk.list);
  });

  const onClickToSave = () => {
    callSettingSave();
  };

  useEffect(() => {
    callSettingDetail();
  }, []);

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="service-settings">
                <div className="service-notice">
                  <div>알림톡을 발송할 대상을 설정할 수 있습니다.</div>
                  <div>알림톡 발송 대상과 유형을 설정해 주세요.</div>
                </div>

                <div className="service-merchant">
                  <div className="service-title">가맹점</div>
                  <div className="service-select">
                    <select>
                      <option>nictest001m</option>
                    </select>
                    <span className="ic20 arrow-down" aria-hidden="true"></span>
                  </div>
                </div>

                <div className="service-section">
                  <div className="service-row align-right">
                    <span>가맹점에 발송</span>
                    <span>고객에게 발송</span>
                  </div>
                </div>

                <div className="service-section">
                  <AlimTalkSettingServiceRow
                    title='신용카드(승인)'
                    merchantFlag={ merchantCardApprovalFlag }
                    userFlag={ userCardApprovalFlag }
                    setMerchantFlag={ setMerchantCardApprovalFlag }
                    setUserFlag={ setUserCardApprovalFlag }
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='신용카드(취소)'
                    merchantFlag={ merchantBankApprovalFlag }
                    userFlag={ userCardCancelFlag }
                    setMerchantFlag={ setMerchantBankApprovalFlag }
                    setUserFlag={ setUserCardCancelFlag }
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='계좌이체(승인)'
                    merchantFlag={ merchantBankApprovalFlag }
                    userFlag={ userBankApprovalFlag }
                    setMerchantFlag={ setMerchantBankApprovalFlag }
                    setUserFlag={ setUserBankApprovalFlag }
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='계좌이체(취소)'
                    merchantFlag={ merchantBankCancelFlag }
                    userFlag={ userBankCancelFlag }
                    setMerchantFlag={ setMerchantBankCancelFlag }
                    setUserFlag={ setUserBankCancelFlag }
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='가상계좌(입금요청)'
                    merchantFlag={ merchantVirtureAccountDepositRequestFlag }
                    userFlag={ userVirtureAccountDepositRequestFlag }
                    setMerchantFlag={ setMerchantVirtureAccountDepositRequestFlag }
                    setUserFlag={ setUserVirtureAccountDepositRequestFlag }
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='가상계좌(입금완료)'
                    merchantFlag={ merchantVirtureAccountDepositCompleteFlag }
                    userFlag={ userVirtureAccountDepositCompleteFlag }
                    setMerchantFlag={ setMerchantVirtureAccountDepositCompleteFlag }
                    setUserFlag={ setUserVirtureAccountDepositCompleteFlag }
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='가상계좌(환불)'
                    merchantFlag={ merchantVirtureAccountRefundFlag }
                    userFlag={ userVirtureAccountRefundFlag }
                    setMerchantFlag={ setMerchantVirtureAccountRefundFlag }
                    setUserFlag={ setUserVirtureAccountRefundFlag }
                  ></AlimTalkSettingServiceRow>
                </div>
              </div>
            </div>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToSave() }
              >저장</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};