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 { CopyIcon, MoreVerticalIcon, TruckIcon } from "lucide-react";
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", className)}>
        <CardHeader className='flex flex-row items-start'>
          <CardTitle className='flex items-center gap-2 text-lg group'>
            <Skeleton className='w-[250px] h-8 bg-card' />
          </CardTitle>
          <CardDescription>
            <Skeleton className='w-full h-8' />
          </CardDescription>
        </CardHeader>
        <CardContent className='flex content-center px-4 py-6 text-center'>
          <Skeleton className='object-contain w-full overflow-hidden bg-white border-2 border-dashed rounded-lg min-h-min' />
        </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.quote")}
          <Button
            size='icon'
            variant='outline'
            className='w-6 h-6 transition-opacity opacity-0 group-hover:opacity-100'
          >
            <CopyIcon className='w-3 h-3' />
            <span className='sr-only'>Copy Order ID</span>
          </Button>

          <div className='flex items-center gap-1 ml-auto'>
            <Button size='sm' variant='outline' className='h-8 gap-1'>
              <TruckIcon className='h-3.5 w-3.5' />
              <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>Track Order</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.download"} />
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Trans i18nKey={"common.remove"} />
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </CardTitle>
        <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
          {quote?.reference}
          {quote?.date.toString()}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <PDFViewer
          file={file}
          className='object-contain my-6 overflow-hidden bg-white border-dashed rounded-none border-1'
        />
        <button
          onClick={(e) => {
            e.preventDefault();
            cancelQuery();
          }}
        >
          Cancel
        </button>
      </CardContent>
    </Card>
  );
};