import { useEffect, useState } from 'react';
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 { useExtensionListMutation } from '@/entities/additional-service/api/use-extension-list-mutation';
import { ExtensionListParams, ExtensionListResponse } from '@/entities/additional-service/model/types';

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

  const [mid, setMid] = useState<string>('nictest001m');

  const { mutateAsync: extensionList } = useExtensionListMutation();

  useSetHeaderTitle('부가서비스 소개');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);
  useSetOnBack(() => {
    navigate(PATHS.home);
  });

  const callExtensionList = () => {
    let params: ExtensionListParams = {
      mid: mid
    }
    extensionList(params).then((rs: ExtensionListResponse) => {
      console.log(rs)
    });
  };

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

  const activeExtensionList = [
    {
      className: 'list-wrap01', serviceName: 'SMS 결제 통보', serviceDesc: '입금 요청부터 완료까지 SMS 자동 전송',
      icon: IMAGE_ROOT + '/icon_ing03.svg', path: PATHS.additionalService.smsPaymentNotification
    },
    {
      className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스',
      icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.ars.list
    },
    {
      className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
      icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list
    },
    {
      className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
      icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch.list
    },
  ];
  const availableExtensionList = [
    {
      className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.payout.list
    },
    {
      className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
      icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency.manage
    },
    {
      className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.shippingHistory
    },
    {
      className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
      icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundAccount.transferList
    },
    {
      className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
      icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth.list
    },
    {
      className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.alimtalk.list
    },
  ];

  const onClickToNavigate = (path?: string) => {
    if(!!path){
      navigate(path);
    }
  };

  const getActiveExtensionList = () => {
    let rs = [];
    for(let i=0;i<activeExtensionList.length;i++){
      rs.push(
        <div 
          key={ 'key-active-' + i }
          className={ activeExtensionList[i]?.className }
          onClick={ () => onClickToNavigate(activeExtensionList[i]?.path) }
        >
          <div>
            <div className="service-name">{ activeExtensionList[i]?.serviceName }</div>
            <p className="service-desc">{ activeExtensionList[i]?.serviceDesc }</p>
          </div>
          <img 
            src={ activeExtensionList[i]?.icon } 
            alt={ activeExtensionList[i]?.serviceName }
          />
        </div>
      );
    }
    return rs;
  };
  const getAvailableExtensionList = () => {
    let rs = [];
    for(let i=0;i<availableExtensionList.length;i++){
      rs.push(
        <div 
          key={ 'key-available-' + i }
          className={ availableExtensionList[i]?.className }
          onClick={ () => onClickToNavigate(availableExtensionList[i]?.path) }
        >
          <div>
            <div className="service-name">{ availableExtensionList[i]?.serviceName }</div>
            <p className="service-desc">{ availableExtensionList[i]?.serviceDesc }</p>
          </div>
          <img 
            src={ availableExtensionList[i]?.icon } 
            alt={ availableExtensionList[i]?.serviceName }
          />
        </div>
      );
    }
    return rs;
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="ing-list">
              <div className="input-wrapper top-select">
                <select>
                  <option value="1">nicetest00g</option>
                  <option value="2">nicetest00g</option>
                  <option value="3">nicetest00g</option>
                </select>
              </div>
              <h3 className="ing-title">사용중인 서비스</h3>
              { getActiveExtensionList() }
              <h3 className="ing-title">신청 가능한 서비스</h3>
              { getAvailableExtensionList() }
            </div>
          </div>
        </div>
      </main>
    </>
  )
};