Presupuestador_web/client/src/app/quotes/components/QuotePDFPreview.tsx

import { PDFViewer } from "@/components";
import { cn } from "@/lib/utils";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Skeleton,
} from "@/ui";
import { useToast } from "@/ui/use-toast";
import { IListQuotes_Response_DTO } from "@shared/contexts";
import { t } from "i18next";
import { DownloadIcon, MoreVerticalIcon } from "lucide-react";
import { useCallback, useMemo } from "react";
import { Trans } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useQuotes } from "../hooks";
import { DownloadQuoteDialog } from "./DownloadQuoteDialog";

export const QuotePDFPreview = ({
  quote,
  className,
}: {
  quote?: IListQuotes_Response_DTO;
  className: string;
}) => {
  const navigate = useNavigate();
  const { toast } = useToast();
  const { useReport, getQuotePDFFilename, useDownloader } = useQuotes();
  const { download, ...downloadProps } = useDownloader();

  const {
    data: reportData,
    isLoading: reportIsLoading,
    isPending: reportIsPending,
    isFetching: reportIsFetching,
  } = useReport(quote?.id);

  const file = useMemo(() => (reportData ? { data: reportData.data } : undefined), [reportData]);

  const handleFinishDownload = useCallback(() => {
    console.log("Download success!!");
    toast({
      description: t("quotes.downloading_dialog.toast_success"),
    });
  }, [toast]);

  if (!quote) {
    return (
      <Card className={cn("overflow-hidden", className)}>
        <CardContent className='px-4 py-6 text-center'>
          <p className='mx-auto'>Select a quote</p>
        </CardContent>
      </Card>
    );
  }

  if (reportIsLoading || reportIsPending || reportIsFetching) {
    return (
      <Card className={cn("overflow-hidden flex flex-col", className)}>
        <CardHeader>
          <Skeleton className='w-full h-8' />
          <Skeleton className='w-full h-8' />
        </CardHeader>
        <CardContent className='py-4'>
          <Skeleton className='w-full aspect-[3/4] relative bg-white shadow flex-1' />
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Card className={cn("overflow-hidden", className)}>
        <CardHeader className='bg-muted/50'>
          <CardTitle className='flex items-center gap-2 text-lg group'>
            {t("quotes.list.preview.quote")}

            <div className='flex items-center gap-1 ml-auto'>
              {/*<Button
                size='sm'
                variant='outline'
                className='h-8 gap-1'
                onClick={(e) => {
                  e.preventDefault();
                  printJS({
                    printable: reportData?.original,
                    type: "pdf",
                    showModal: false,
                    modalMessage: "Cargando...",
                  });
                }}
              >
                <PrinterIcon className='h-3.5 w-3.5' />
                <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
                  {t("common.print")}
                </span>
              </Button>*/}
              <Button
                size='sm'
                variant='outline'
                className='h-8 gap-1'
                onClick={() => {
                  download(quote.id, getQuotePDFFilename(quote));
                }}
              >
                <DownloadIcon className='h-3.5 w-3.5' />
                <span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'>
                  {t("quotes.list.preview.download_quote")}
                </span>
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button size='icon' variant='outline' className='w-8 h-8'>
                    <MoreVerticalIcon className='h-3.5 w-3.5' />
                    <span className='sr-only'>
                      <Trans i18nKey={"common.more"} />
                    </span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align='end'>
                  <DropdownMenuItem
                    onClick={(e) => {
                      e.preventDefault();
                      navigate(`/quotes/edit/${quote.id}`, { relative: "path" });
                    }}
                  >
                    <Trans i18nKey={"common.edit"} />
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Trans i18nKey={"common.duplicate"} />
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Trans i18nKey={"common.archive"} />
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </CardTitle>
          <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
            {quote?.reference}
            {quote?.date.toString()}
          </CardDescription>
        </CardHeader>
        <CardContent className='py-4'>
          <PDFViewer file={file} className='object-contain' />
        </CardContent>
      </Card>
      <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
    </>
  );
};