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 { useVatReturnDetailMutation } from '@/entities/vat-return/api/use-vat-return-detail-mutation';
import { HeaderType } from '@/entities/common/model/types';
import {
  VatReturnDetailParams,
  VatReturnDetailResponse
} from '@/entities/vat-return/model/types';
import {
  useSetOnBack, 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { SupplierSection } from '@/entities/vat-return/ui/section/supplier-section';
import { ReceiverSection } from '@/entities/vat-return/ui/section/receiver-section';
import { IssueSection } from '@/entities/vat-return/ui/section/issue-section';
import { AmountSection } from '@/entities/vat-return/ui/section/amount-section';

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

  let taxInvoiceNumber = location?.state.taxInvoiceNumber;
  taxInvoiceNumber = 'TAX202506300001';
  
  const [openAmount, setOpenAmount] = useState<boolean>(false);
  const [detail, setDetail] = useState<VatReturnDetailResponse>({});

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

  const callDetail = () => {
    let params: VatReturnDetailParams = {
      taxInvoiceNumber: taxInvoiceNumber,
    };
    vatReturnDetail(params).then((rs: VatReturnDetailResponse) => {
      setDetail(rs);
    });
  };
  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">
                <AmountSection
                  detail={ detail }
                ></AmountSection>
                <div className="txn-divider minus"></div>
                <IssueSection
                  detail={ detail }
                ></IssueSection>
                <div className="txn-divider minus"></div>
                <ReceiverSection
                  detail={ detail }
                ></ReceiverSection>
                <div className="txn-divider"></div>
                <SupplierSection
                  detail={ detail }
                ></SupplierSection>
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  )
};