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

export function Page7({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  const setRec = (i: number, k: string, v: string) => {
    const r = [...data.recovery];
    r[i] = { ...r[i], [k]: v };
    onChange({ ...data, recovery: r });
  };
  const setRes = (k: string, v: string) =>
    onChange({ ...data, result: { ...data.result, [k]: v } });
  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>
      <div style={S.mapPlaceholder}>방제선/자원 동원 결과 지도</div>
      <div style={S.subHeader}>기름회수량</div>
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>선명</th>
            <th style={S.th}>작업기간(회수작업 시작시간+시간)</th>
          </tr>
        </thead>
        <tbody>
          {data.recovery.map((r, i) => (
            <tr key={i}>
              <ECell
                value={r.shipName}
                editing={editing}
                onChange={(v) => setRec(i, 'shipName', v)}
              />
              <ECell value={r.period} editing={editing} onChange={(v) => setRec(i, 'period', v)} />
            </tr>
          ))}
        </tbody>
      </table>
      {editing && (
        <AddRowBtn
          onClick={() =>
            onChange({ ...data, recovery: [...data.recovery, { shipName: '', period: '' }] })
          }
        />
      )}
      <div style={S.subHeader}>동원 방제선 내역</div>
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>유출량(kl)</th>
            <th style={S.th}>누적풍화량(kl)</th>
            <th style={S.th}>누적회수량(kl)</th>
            <th style={S.th}>누적해상잔존량(kl)</th>
            <th style={S.th}>누적연안부착량(kl)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <ECell
              value={data.result.spillTotal}
              editing={editing}
              onChange={(v) => setRes('spillTotal', v)}
            />
            <ECell
              value={data.result.weatheredTotal}
              editing={editing}
              onChange={(v) => setRes('weatheredTotal', v)}
            />
            <ECell
              value={data.result.recoveredTotal}
              editing={editing}
              onChange={(v) => setRes('recoveredTotal', v)}
            />
            <ECell
              value={data.result.seaRemainTotal}
              editing={editing}
              onChange={(v) => setRes('seaRemainTotal', v)}
            />
            <ECell
              value={data.result.coastAttachTotal}
              editing={editing}
              onChange={(v) => setRes('coastAttachTotal', v)}
            />
          </tr>
        </tbody>
      </table>
    </div>
  );
}
