import type { ConfigTabLabel } from "../editorCore";

type TopNavTabsProps = {
  contentTypes: string[];
  configTabLabels: ConfigTabLabel[];
  activeSection: "content" | "config";
  activeType: string;
  activeConfigTab: ConfigTabLabel;
  hasPendingRecordChanges: boolean;
  isLoading: boolean;
  isSaving: boolean;
  formatTypeLabel: (type: string) => string;
  onError: (message: string) => void;
  onSetActiveSection: (section: "content" | "config") => void;
  onSetActiveType: (type: string) => void;
  onSetActiveConfigTab: (label: ConfigTabLabel) => void;
};

export default function TopNavTabs(props: TopNavTabsProps) {
  const {
    contentTypes,
    configTabLabels,
    activeSection,
    activeType,
    activeConfigTab,
    hasPendingRecordChanges,
    isLoading,
    isSaving,
    formatTypeLabel,
    onError,
    onSetActiveSection,
    onSetActiveType,
    onSetActiveConfigTab,
  } = props;

  return (
    <div className="top-nav-tabs">
      <div className="nav-cluster">
        <p className="nav-cluster-title">Content</p>
        <div className="nav-tab-row">
          {contentTypes.map((type) => (
            <button
              key={`content-tab-${type}`}
              type="button"
              className={`nav-pill ${activeSection === "content" && activeType === type ? "is-active" : ""}`}
              onClick={() => {
                if (hasPendingRecordChanges && type !== activeType) {
                  onError("Pending changes are unsaved");
                  return;
                }
                onError("");
                onSetActiveSection("content");
                onSetActiveType(type);
              }}
              disabled={isLoading || isSaving}
            >
              {formatTypeLabel(type)}
            </button>
          ))}
        </div>
      </div>

      <div className="nav-cluster">
        <p className="nav-cluster-title">Configuration</p>
        <div className="nav-tab-row">
          {configTabLabels.map((label) => (
            <button
              key={`config-tab-${label}`}
              type="button"
              className={`nav-pill ${activeSection === "config" && activeConfigTab === label ? "is-active" : ""}`}
              onClick={() => {
                if (hasPendingRecordChanges) {
                  onError("Pending changes are unsaved");
                  return;
                }
                onError("");
                onSetActiveSection("config");
                onSetActiveConfigTab(label);
              }}
            >
              {label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}