import {
  useKhovtTransPhieuXuatControllerFindById,
  useKhovtTransPhieuXuatControllerUpdateById,
} from 'main/apis/drc/endpoints/khovt-trans-phieu-xuat-controller/khovt-trans-phieu-xuat-controller';
import BasicTemplate from 'main/components/templates/basic-template';
import { Page } from 'main/constants';
import { useState } from 'react';
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit';
import { useNavigate, useParams } from 'react-router-dom';
import { Button, Card, CardBody, CardFooter, CardHeader, Container, Row } from 'reactstrap';
import CancelExportBillModal from './sub-components/cancel-export-bill-modal';
import SuppliesStoreExportDetailInfo from './sub-components/supplies-store-export-detail-info';
import SuppliesStoreExportDetailTable from './sub-components/supplies-store-export-detail-table/supplies-store-export-detail-table';
import tableConfig from '../supplies-store-export-list/sub-components/supplies-store-export-table/table-config';

const { ExportCSVButton } = CSVExport;

function SuppliesStoreExportDetail() {
  // React Router
  const { id: suppliesExportBillId } = useParams();
  const navigate = useNavigate();

  // React State
  const [isOpenCancelModal, setOpenCancelModal] = useState(false);

  // React Query hooks
  const {
    data: suppliesExportBill,
    isLoading: suppliesExportBillIsLoading,
    refetch: suppliesExportBillRefetch,
  } = useKhovtTransPhieuXuatControllerFindById(Number(suppliesExportBillId), {
    query: {
      enabled: !!suppliesExportBillId,
    },
  });

  const {
    isPending: updatedSuppliesExportBillIsPeding,
    isError: updatedSuppliesExportBillIsError,
    mutateAsync: updatedSuppliesExportBillMutateAsync,
  } = useKhovtTransPhieuXuatControllerUpdateById();

  // React function
  const toggleCancelModal = () => setOpenCancelModal(!isOpenCancelModal);

  const handleCancelModalConfirmClick = () => {
    toggleCancelModal();
    updatedSuppliesExportBillMutateAsync({
      id: Number(suppliesExportBillId),
      data: {
        status: 'Canceled',
      },
    });
    if (updatedSuppliesExportBillIsError) {
      navigate(Page.SYSTEM_ERROR.PATH);
    } else {
      suppliesExportBillRefetch();
    }
  };

  return (
    <BasicTemplate
      pageTitle={Page.SUPPLIES_STORE_EXPORT_DETAIL.TITLE}
      pageName={Page.SUPPLIES_STORE_EXPORT_DETAIL.NAME}
      isLoading={suppliesExportBillIsLoading || updatedSuppliesExportBillIsPeding}>
      <Container className="mt--6" fluid>
        <Row>
          <div className="col">
            <Card>
              <CardHeader>
                <h3 className="mb-0 text-center">SỐ PHIẾU XUẤT</h3>
              </CardHeader>
              <CardBody>
                {suppliesExportBill && (
                  <>
                    <SuppliesStoreExportDetailInfo suppliesExportBill={suppliesExportBill} />
                    {suppliesExportBill.details && (
                      <SuppliesStoreExportDetailTable supplies={suppliesExportBill.details} />
                    )}
                  </>
                )}
              </CardBody>
              <CardFooter>
                <div className="d-flex justify-content-between px-4 pb-1">
                  <Button className="btn-dark" onClick={() => navigate(Page.SUPPLIES_STORE_EXPORT_LIST.PATH)}>
                    Thoát
                  </Button>
                  <Button color="danger" onClick={toggleCancelModal}>
                    Hủy phiếu xuất
                  </Button>
                  <ToolkitProvider
                    data={suppliesExportBillId ? [suppliesExportBillId] : []}
                    keyField="id"
                    columns={tableConfig.columns}
                    exportCSV={{
                      fileName: `Phiếu-xuất-${suppliesExportBillId}.csv`,
                      exportAll: true,
                      charset: 'utf-8',
                    }}>
                    {(props: any) => (
                      <ExportCSVButton className="btn-neutral" {...props.csvProps}>
                        Tải phiếu xuất
                      </ExportCSVButton>
                    )}
                  </ToolkitProvider>
                </div>
              </CardFooter>
            </Card>
          </div>
        </Row>
      </Container>
      <CancelExportBillModal
        suppliesExportBillId={suppliesExportBillId}
        isOpen={isOpenCancelModal}
        toggle={toggleCancelModal}
        handleConfirmClick={handleCancelModalConfirmClick}
      />
    </BasicTemplate>
  );
}

export default SuppliesStoreExportDetail;
