"use client";

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

import type { ProgressReportIssuesPrintModel } from "./progress-report-issues-print-model";
import { ProgressReportIssuesPrintStyles } from "./progress-report-issues-print-styles";

const FALLBACK_MINISTRY_LOGO = "/images/print/maff-logo.png";
const CDC_LOGO = "/images/print/cdc-logo.png";

type Props = {
  model: ProgressReportIssuesPrintModel;
};

export function ProgressReportIssuesPrintView({ model }: Props) {
  return (
    <>
      <ProgressReportIssuesPrintStyles />

      <Box className="progress-report-issues-print-root">
        <Box className="progress-report-issues-print-page">
          <Box className="progress-report-issues-print-header">
            <Typography className="progress-report-issues-print-motto">
              ព្រះរាជាណាចក្រកម្ពុជា
            </Typography>
            <Typography className="progress-report-issues-print-motto">
              ជាតិសាសនា ព្រះមហាក្សត្រ
            </Typography>
            <Box className="progress-report-issues-print-ornament" aria-hidden>
              ────୨ৎ────
            </Box>

            <Box className="progress-report-issues-print-logo-row">
              <Box
                component="img"
                src={model.ministryLogo || FALLBACK_MINISTRY_LOGO}
                alt={model.ministryName}
                className="progress-report-issues-print-logo progress-report-issues-print-logo--ministry"
              />

              <Box>
                <Typography className="progress-report-issues-print-title">
                  របាយការណ៍វឌ្ឍនភាព
                </Typography>
                <Typography className="progress-report-issues-print-subtitle">
                  {model.ministryName}
                </Typography>
                <Typography className="progress-report-issues-print-subtitle">
                  {model.reportTitle} ឆ្នាំ {model.year}
                </Typography>
              </Box>

              <Box
                component="img"
                src={CDC_LOGO}
                alt="CDC-GPSF"
                className="progress-report-issues-print-logo progress-report-issues-print-logo--cdc"
              />
            </Box>
          </Box>

          <Typography className="progress-report-issues-print-intro">
            {model.description}
          </Typography>

          {model.issues.map((issue) => (
            <Box className="progress-report-issues-print-issue" key={issue.number}>
              <Typography className="progress-report-issues-print-issue-title">
                {issue.number}. {issue.title}
              </Typography>

              <table className="progress-report-issues-print-table">
                <thead>
                  <tr>
                    <th>ប្រភេទព័ត៌មាន</th>
                    <th>ពិពណ៌នា</th>
                  </tr>
                </thead>
                <tbody>
                  {issue.rows.map((row) => (
                    <tr key={row.labelKh}>
                      <td>{row.labelKh}</td>
                      <td>{row.value}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Box>
          ))}
        </Box>
      </Box>
    </>
  );
}