nice-app-web/src/pages/vat-return/detail-page.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
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 {
  Breakdown,
  VatReturnBreakdownParams,
  VatReturnBreakdownResponse,
  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';
import { useVatReturnTaxInvoiceMutation } from '@/entities/vat-return/api/use-vat-return-tax-invoice-mutation';
import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-detail-bottom-sheet';
import { useVatReturnBreakdownMutation } from '@/entities/vat-return/api/use-vat-return-breakdown-mutation';

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

  let taxInvoiceNumber = location?.state.taxInvoiceNumber;
  // taxInvoiceNumber = 'TAX202506300001';
  
  const [openAmount, setOpenAmount] = useState<boolean>(false);
  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
  const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
   
  useSetHeaderTitle(t('vatReturn.taxInvoiceDetail'));
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.vatReturn.list);
  });
  useSetFooterMode(false);
  
  const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
  const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation();
  const { mutateAsync: vatReturnBreakdown } = useVatReturnBreakdownMutation(); 

  const callTaxInvoice = () => {
    let params: VatReturnDetailParams = {
      taxInvoiceNumber: taxInvoiceNumber,
    };
    vatReturnDetail(params).then((rs: VatReturnDetailResponse) => {
      setDetail(rs);
      
    });
  };
  const callVatReturnBreakdown = async() => {
    let params: VatReturnBreakdownParams = {
      taxInvoiceNumber: taxInvoiceNumber,
    };
    vatReturnBreakdown(params).then((rs: VatReturnBreakdownResponse) => {
      setBreakdown(rs.breakdown);
    });
  };

  const onClickToOpenBottomSheet = () => {
    setBottomSheetOn(true);
  };

  useEffect(() => {
    callTaxInvoice();
    callVatReturnBreakdown();
  }, []);
  
  return (
    <>
      <main className="full-height">
        <div className="tab-content pb-86">
          <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 className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={ onClickToOpenBottomSheet }
              >{t('vatReturn.viewDetails')}</button>
            </div>
          </div>
        </div>
      </main>
      { !!bottomSheetOn &&
        <VatReturnListDetailBottomSheet
          bottomSheetOn={ bottomSheetOn }
          setBottomSheetOn={ setBottomSheetOn }
          breakdown={ breakdown }
          transactionAmount={ detail?.transactionAmount }
          supplyAmount={ detail?.supplyAmount }
          vatAmount={ detail?.vatAmount }
          totalAmount={ detail?.totalAmount }
        ></VatReturnListDetailBottomSheet>
      }
    </>
  )
};