import type { Tgu2DMapSelection } from "./model/mapSelectionTypes";

type StationSelection = Extract<Tgu2DMapSelection, { type: "marker" }> & { layer: "stations" };

type Props = {
  selection: StationSelection;
  onClose: () => void;
};

export function Tgu2DMapStationPanel({ selection, onClose }: Props) {
  return (
    <aside className="tgu-map-requests-panel">
      <div className="tgu-panel-heading">
        <span>Станция</span>
        <button className="tgu-link-button" type="button" onClick={onClose}>
          Закрыть
        </button>
      </div>
      <div className="tgu-map-request-details" style={{ flex: 1 }}>
        <div className="tgu-map-panel__label">{selection.name}</div>
        <dl className="tgu-map-request-details__grid">
          <dt>Номер</dt>
          <dd className="mono">{selection.stationNumber ?? "—"}</dd>

          <dt>Широта</dt>
          <dd className="mono">{selection.lat != null ? `${selection.lat.toFixed(4)}°` : "—"}</dd>

          <dt>Долгота</dt>
          <dd className="mono">{selection.lon != null ? `${selection.lon.toFixed(4)}°` : "—"}</dd>

          <dt>Высота, м</dt>
          <dd className="mono">{selection.altitude != null ? selection.altitude.toFixed(1) : "—"}</dd>

          <dt>Угол места мин, °</dt>
          <dd className="mono">{selection.elevationMin != null ? selection.elevationMin.toFixed(1) : "—"}</dd>

          <dt>Угол места макс, °</dt>
          <dd className="mono">{selection.elevationMax != null ? selection.elevationMax.toFixed(1) : "—"}</dd>
        </dl>
      </div>
    </aside>
  );
}
