"use client";

import { useMemo, useState } from "react";

import PrintOutlinedIcon from "@mui/icons-material/PrintOutlined";
import Button from "@mui/material/Button";

import type { IssueRow } from "../progress-report-view-details.types";
import { buildPswgProgressReportIssuesPrintModel } from "./print/progress-report-issues-print-data";
import { ProgressReportIssuesPrintView } from "./print/progress-report-issues-print-view";

type Props = {
  rows: IssueRow[];
};

export function PswgIssuesPrintButton({ rows }: Props) {
  const [open, setOpen] = useState(false);

  const model = useMemo(
    () => buildPswgProgressReportIssuesPrintModel(rows),
    [rows],
  );

  return (
    <>
      <Button
        type="button"
        startIcon={<PrintOutlinedIcon />}
        onClick={(event) => {
          event.preventDefault();
          event.stopPropagation();
          setOpen(true);
        }}
        sx={{
          textTransform: "none",
          fontSize: 13,
          fontWeight: 500,
        }}
      >
        Print
      </Button>

      <ProgressReportIssuesPrintView
        model={model}
        open={open}
        onClose={() => setOpen(false)}
      />
    </>
  );
}