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 { useInvoiceDetailMutation } from '@/entities/tax/api/use-invoice-detail-mutation';
import { DetailAmountInfoSection } from '@/entities/tax/ui/detail-amount-info-section';
import { DetailPublishInfoSection } from '@/entities/tax/ui/detail-publish-info-section';
import { DetailReceiverInfoSection } from '@/entities/tax/ui/detail-receiver-info-section';
import { DetailSupplierInfoSection } from '@/entities/tax/ui/detail-supplier-info-section';
import { HeaderType } from '@/entities/common/model/types';
import {
  DetailResponse,
  InvoiceDetailParams,
  DetailAmountInfoProps,
  DetailInfoSectionKeys,
  DetailPublishInfoProps,
  DetailReceiverInfoProps,
  DetailSupplierInfoProps
} from '@/entities/tax/model/types';
import {
  useSetOnBack, 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

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

  const [tid, setTid] = useState<string>(location?.state.tid);

  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
  const [publishInfo, setPublishInfo] = useState<DetailPublishInfoProps>();
  const [receiverInfo, setReceiverInfo] = useState<DetailReceiverInfoProps>();
  const [supplierInfo, setSupplierInfo] = useState<DetailSupplierInfoProps>();

  const [showAmount, setShowAmount] = useState<boolean>(false);
  const [showPublish, setShowPublish] = useState<boolean>(false);
  const [showReceiver, setShowReceiver] = useState<boolean>(false);
  const [showSupplier, setShowSupplier] = useState<boolean>(false);

  useSetHeaderTitle('세금계산서 상세');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.tax.invoice.list);
  });
  useSetFooterMode(false);
  
  
  const { mutateAsync: invoiceDetail } = useInvoiceDetailMutation();

  const onClickToShowInfo = (info: DetailInfoSectionKeys) => {
    if(info === DetailInfoSectionKeys.Amount){
      setShowAmount(!showAmount);
    }
    else if(info === DetailInfoSectionKeys.Publish){
      setShowPublish(!showReceiver);
    }
    else if(info === DetailInfoSectionKeys.Receiver){
      setShowReceiver(!showReceiver);
    }
    else if(info === DetailInfoSectionKeys.Supplier){
      setShowSupplier(!showSupplier);
    }
  };

  const callDetail = () => {
    let invoiceDetailParams: InvoiceDetailParams = {
      svcCd: 'st',
      tid: tid
    };
    invoiceDetail(invoiceDetailParams).then((rs: DetailResponse) => {
      setAmountInfo(rs.amountInfo);
      setPublishInfo(rs.publishInfo);
      setReceiverInfo(rs.receiverInfo);
      setSupplierInfo(rs.supplierInfo);
    });
  };
  useEffect(() => {
    // callDetail();
  }, []);
  
  return (
    <>
      <main className="full-height">
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">

                <DetailAmountInfoSection
                  amountInfo={ amountInfo }
                  show={ showAmount }
                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
                ></DetailAmountInfoSection>

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

                <DetailPublishInfoSection
                  publishInfo={ publishInfo }
                  show={ showAmount }
                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
                ></DetailPublishInfoSection>

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

                <DetailReceiverInfoSection
                  receiverInfo={ receiverInfo }
                  show={ showAmount }
                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
                ></DetailReceiverInfoSection>

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

                <DetailSupplierInfoSection
                  supplierInfo={ supplierInfo }
                  show={ showAmount }
                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
                ></DetailSupplierInfoSection>
                
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  )
};