import type { TguPlanUi } from "../../model/timelineTypes";
import { platformLabel } from "../tgu-planning/tguTimelineMapper";
import { statusStyle } from "../tgu-planning/tguStatus";
import type { Tgu2DMapSelection } from "./model/mapSelectionTypes";

type Tgu2DMapDetailsProps = {
  selectedPlan?: TguPlanUi;
  selectedObject?: Tgu2DMapSelection;
};

export function Tgu2DMapDetails({ selectedPlan, selectedObject }: Tgu2DMapDetailsProps) {
  const status = selectedPlan ? statusStyle(selectedPlan.status) : undefined;

  return (
    <section className="tgu-map-details">
      <div>
        <div className="tgu-map-details__label">План</div>
        <div className="tgu-map-details__value mono">{selectedPlan?.planId || "-"}</div>
      </div>
      <div>
        <div className="tgu-map-details__label">КА</div>
        <div className="tgu-map-details__value">
          {selectedPlan ? platformLabel(selectedPlan.platform, selectedPlan.spacecraftId) : "-"}
        </div>
      </div>
      <div>
        <div className="tgu-map-details__label">Статус</div>
        <div className="tgu-map-details__value">
          {status ? (
            <span className="tgu-map-status-pill">
              <i style={{ backgroundColor: status.color }} />
              {status.label}
            </span>
          ) : "-"}
        </div>
      </div>
      <div>
        <div className="tgu-map-details__label">Объект карты</div>
        <div className="tgu-map-details__value mono">{selectedObject?.name || selectedObject?.id || "-"}</div>
      </div>
      <div>
        <div className="tgu-map-details__label">Работы</div>
        <div className="tgu-map-details__value">Работы плана</div>
      </div>
    </section>
  );
}

