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 { IListQuotes_Response_DTO } from "@shared/contexts";
import { t } from "i18next";
import { DownloadIcon, MoreVerticalIcon, PrinterIcon } from "lucide-react";
import printJS from "print-js";
import { useMemo } from "react";
import { Trans } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useQuotes } from "../hooks";

export const QuotePDFPreview = ({
  quote,
  className,
}: {
  quote?: IListQuotes_Response_DTO;
  className: string;
}) => {
  const navigate = useNavigate();
  const { useReport } = useQuotes();

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

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

  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>
          <CardTitle>
            <Skeleton className='w-full h-8' />
          </CardTitle>
          <CardDescription>
            <Skeleton className='w-full h-8' />
          </CardDescription>
        </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: file,
                  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'>
              <DownloadIcon className='h-3.5 w-3.5' />
              <span className='lg:sr-only xl:not-sr-only xl: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>
  );
};