import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import type { MeetingRequestIssue } from "../../meeting-request-data";
import { getPrintValue } from "./meeting-print-helpers";

type MeetingPrintIssueTableProps = {
  issue: MeetingRequestIssue;
  issueNumber: number;
};

function getShortPrintText(value?: string | null) {
  const text = getPrintValue(value);

  if (text.length <= 260) {
    return text;
  }

  return `${text.slice(0, 260).trim()}...`;
}

export function MeetingPrintIssueTable({
  issue,
  issueNumber,
}: MeetingPrintIssueTableProps) {
  return (
    <Box className="meeting-print-issue">
      <Typography className="meeting-print-issue-title font-kh">
        {issueNumber}. {getPrintValue(issue.issue || issue.title)}
      </Typography>

      <table className="meeting-print-table">
        <thead>
          <tr>
            <th>Meeting Minutes</th>
            <th>Information</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Category of Issue</td>
            <td className="font-kh">{getPrintValue(issue.category)}</td>
          </tr>
          <tr>
            <td>Issue Description</td>
            <td className="meeting-print-long-table-text font-kh">
              {getShortPrintText(issue.description)}
            </td>
          </tr>
          <tr>
            <td>Recommendation</td>
            <td className="meeting-print-long-table-text font-kh">
              {getShortPrintText(issue.recommendation)}
            </td>
          </tr>
          <tr>
            <td>{"Gov't primary Agency"}</td>
            <td className="font-kh">{getPrintValue(issue.primaryAgency)}</td>
          </tr>
          <tr>
            <td>{"Gov't Second Agency"}</td>
            <td className="font-kh">{getPrintValue(issue.secondAgency)}</td>
          </tr>
          <tr>
            <td>{"Gov't third Agency"}</td>
            <td className="font-kh">{getPrintValue(issue.thirdAgency)}</td>
          </tr>
          <tr>
            <td>{"Gov't fourth Agency"}</td>
            <td className="font-kh">{getPrintValue(issue.fourthAgency)}</td>
          </tr>
          <tr>
            <td>{"Gov't fifth Agency"}</td>
            <td className="font-kh">{getPrintValue(issue.fifthAgency)}</td>
          </tr>
          <tr>
            <td>Status</td>
            <td className="font-kh">{getPrintValue(issue.status)}</td>
          </tr>
        </tbody>
      </table>
    </Box>
  );
}