import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IntroListItem } from '@/entities/additional-service/ui/intro-list-item';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

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

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

  const usingList = [
    {
      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.arsCardPayment.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 requestList = [
    {
      className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency.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.fundTransfer.requestList
    },
    {
      className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
      icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth
    },
    {
      className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification.list
    },
  ];

  const getUsingList = () => {
    let rs = [];
    for(let i=0;i<usingList.length;i++){
      rs.push(
        <IntroListItem
          key={ 'key-using-' + i }
          className={ usingList[i]?.className }
          serviceName={ usingList[i]?.serviceName }
          serviceDesc={ usingList[i]?.serviceDesc }
          icon={ usingList[i]?.icon }
          path={ usingList[i]?.path }
        ></IntroListItem>
      );
    }
    return rs;
  };
  const getRequestList = () => {
    let rs = [];
    for(let i=0;i<requestList.length;i++){
      rs.push(
        <IntroListItem
          key={ 'key-request-' + i }
          className={ requestList[i]?.className }
          serviceName={ requestList[i]?.serviceName }
          serviceDesc={ requestList[i]?.serviceDesc }
          icon={ requestList[i]?.icon }
          path={ requestList[i]?.path }
        ></IntroListItem>
      );
    }
    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>
              { getUsingList() }
              <h3 className="ing-title">신청 가능한 서비스</h3>
              { getRequestList() }
            </div>
          </div>
        </div>
      </main>
    </>
  );
};