import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
  useSetOnBack, 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section';
import { overlay } from 'overlay-kit';
import { Dialog } from '@/shared/ui/dialogs/dialog';

export const LinkPaymentPendingDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();

  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');

  const [paymentInfo, setPaymentInfo] = useState<any>();
  const [deetsInfo, setDeetsInfo] = useState<any>();
  
  const [showPayment, setShowPayment] = useState<boolean>(false);
  const [showDeets, setShowDeets] = useState<boolean>(false);

  useSetHeaderTitle('링크결제 상세_발송대기');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.linkPayment.pendingSend);
  });
  useSetFooterMode(false);

  const onClickToNavigate = (path: string) => {
    let timeout = setTimeout(() => {
      clearTimeout(timeout);
      navigate(PATHS.additionalService.linkPayment.pendingSend, {
      });
    }, 10)
  };
  
  const onClickToShowInfo = () => {
    setShowPayment(!showPayment);
  };

  const onClickToCancel = () => {
    let msg = '삭제 하시겠습니까?';
    
    overlay.open(({ 
      isOpen,
      close,
      unmount
    }) => {
      return (
        <Dialog
          afterLeave={ unmount }
          open={ isOpen }
          onClose={ close }
          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend) }
          message={ msg }
          buttonLabel={['취소', '확인']}
        />
      );
    });
  };

  return (
    <>
      <main className="full-height">
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">

                <div className="txn-num-group">
                  <div className="txn-amount">
                    <div className="value">3,500,000<span className="unit">원</span></div>
                  </div>
                  <div className="txn-mid">
                    <span className="value">나이스테스트가맹점</span>
                  </div>
                  <div className="txn-mid">
                    <span className="value">2025.06.09</span>
                  </div>
                </div>

                <div className="txn-divider minus"></div>

                <DetailPaymentInfoSection
                  paymentInfo={paymentInfo}
                  show={showPayment}
                  onClickToShowInfo={onClickToShowInfo}
                />
              </div>
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToCancel() }
              >삭제</button>
            </div>
          </div>
        </div>
      </main>
    </>
  )
};