import type { OilSpillReportData } from '@interfaces/reports/ReportsInterface';
import { S } from '../OilSpillReportTemplate';
import { ECell } from './ECell';
import { SensitivityMapSection } from './SensitivityMapSection';

export function Page5({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  const setSens = (i: number, v: string) => {
    const s = [...data.sensitivity];
    s[i] = { ...s[i], area: v };
    onChange({ ...data, sensitivity: s });
  };
  return (
    <div style={S.page}>
      <div className="absolute top-2.5 right-4 text-caption text-fg-disabled font-semibold">
        해양오염방제지원시스템
      </div>
      <div style={S.sectionTitle}>통합민감도 평가 (해당 계절)</div>
      <SensitivityMapSection data={data} editing={editing} onChange={onChange} />
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>민감도</th>
            <th style={S.th}>분포 면적(km²)</th>
          </tr>
        </thead>
        <tbody>
          {data.sensitivity.map((s, i) => (
            <tr key={i}>
              <td style={{ ...S.td, fontWeight: 700 }}>
                <span
                  style={{
                    display: 'inline-block',
                    width: 10,
                    height: 10,
                    borderRadius: 2,
                    background: s.color,
                    marginRight: 8,
                    verticalAlign: 'middle',
                  }}
                />
                {s.level}
              </td>
              <ECell value={s.area} editing={editing} onChange={(v) => setSens(i, v)} />
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
