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

export function Page1({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  const inc = data.incident;
  const set = (k: keyof typeof inc, v: string) =>
    onChange({ ...data, incident: { ...inc, [k]: v } });

  return (
    <div style={S.page}>
      <div className="absolute top-2.5 right-4 text-caption text-fg-disabled font-semibold">
        해양오염방제지원시스템
      </div>
      <div
        className="text-color-accent text-title-1 font-bold mb-5 rounded px-5 py-3 text-center tracking-wide border"
        style={{ background: 'rgba(6,182,212,0.1)', border: '1px solid rgba(6,182,212,0.2)' }}
      >
        유류오염사고 대응지원 상황도
      </div>
      <div style={S.sectionTitle}>1. 사고 정보</div>
      <table style={S.table}>
        <colgroup>
          <col style={{ width: '14%' }} />
          <col style={{ width: '36%' }} />
          <col style={{ width: '14%' }} />
          <col style={{ width: '36%' }} />
        </colgroup>
        <tbody>
          <tr>
            <td style={S.thLabel}>사고명</td>
            <ECell
              value={inc.name}
              editing={editing}
              onChange={(v) => set('name', v)}
              placeholder="사고명 입력"
            />
            <td style={S.thLabel}>작성시간</td>
            <ECell value={inc.writeTime} editing={editing} onChange={(v) => set('writeTime', v)} />
          </tr>
          <tr>
            <td style={S.thLabel}>선명(시설명)</td>
            <ECell
              value={inc.shipName}
              editing={editing}
              onChange={(v) => set('shipName', v)}
              placeholder="선명"
            />
            <td style={S.thLabel}>제원</td>
            <ECell
              value={inc.agent}
              editing={editing}
              onChange={(v) => set('agent', v)}
              placeholder="제원"
            />
          </tr>
          <tr>
            <td style={S.thLabel}>사고위치</td>
            <ECell
              value={inc.location}
              editing={editing}
              onChange={(v) => set('location', v)}
              placeholder="위치"
            />
            <td style={S.thLabel}>좌표</td>
            <ECell value={`위도: ${inc.lat}  경도: ${inc.lon}`} editing={false} />
          </tr>
          {editing && (
            <tr>
              <td style={S.thLabel}>위도</td>
              <ECell
                value={inc.lat}
                editing
                onChange={(v) => set('lat', v)}
                placeholder="34° 43′ 37.6″"
              />
              <td style={S.thLabel}>경도</td>
              <ECell
                value={inc.lon}
                editing
                onChange={(v) => set('lon', v)}
                placeholder="127° 43′ 32.6″"
              />
            </tr>
          )}
          <tr>
            <td style={S.thLabel}>발생시각</td>
            <ECell value={inc.occurTime} editing={editing} onChange={(v) => set('occurTime', v)} />
            <td style={S.thLabel}>사고유형</td>
            <ECell
              value={inc.accidentType}
              editing={editing}
              onChange={(v) => set('accidentType', v)}
              placeholder="사고유형"
            />
          </tr>
          <tr>
            <td style={S.thLabel}>오염물질</td>
            <ECell value={inc.pollutant} editing={editing} onChange={(v) => set('pollutant', v)} />
            <td style={S.thLabel}>유출 추정량</td>
            <ECell
              value={inc.spillAmount}
              editing={editing}
              onChange={(v) => set('spillAmount', v)}
            />
          </tr>
          <tr>
            <td style={S.thLabel}>수심</td>
            <ECell
              value={inc.depth}
              editing={editing}
              onChange={(v) => set('depth', v)}
              placeholder="수심"
            />
            <td style={S.thLabel}>저질</td>
            <ECell
              value={inc.seabed}
              editing={editing}
              onChange={(v) => set('seabed', v)}
              placeholder="저질"
            />
          </tr>
        </tbody>
      </table>
    </div>
  );
}
