type EditorToolbarProps = {
  activeSection: "content" | "config";
  activeType: string;
  activeConfigTab?: string;
  activeConfigEntriesLength: number;
  selectedConfigIndex: number;
  selectedConfigEntry: unknown;
  hasUnsavedContentChanges: boolean;
  hasUnsavedConfigChanges: boolean;
  parsedJsonError: string;
  validationIssuesLength: number;
  hasPendingRecordChanges: boolean;
  recordDraftError: string;
  isLoading: boolean;
  isSaving: boolean;
  onSaveContent: () => void;
  onAddRecord: () => void;
  onDeleteRecord: () => void;
  onSaveConfig: () => void;
  onAddConfigEntry: () => void;
  onDeleteConfigEntry: () => void;
  onMoveConfigEntry: (direction: -1 | 1) => void;
  error: string;
};

export default function EditorToolbar(props: EditorToolbarProps) {
  const {
    activeSection,
    activeType,
    activeConfigTab,
    activeConfigEntriesLength,
    selectedConfigIndex,
    selectedConfigEntry,
    hasUnsavedContentChanges,
    hasUnsavedConfigChanges,
    parsedJsonError,
    validationIssuesLength,
    hasPendingRecordChanges,
    recordDraftError,
    isLoading,
    isSaving,
    onSaveContent,
    onAddRecord,
    onDeleteRecord,
    onSaveConfig,
    onAddConfigEntry,
    onDeleteConfigEntry,
    onMoveConfigEntry,
    error,
  } = props;
  const isReadOnlyColorsTab = activeConfigTab === "Colors";

  return (
    <div className="toolbar">
      {activeSection === "content" ? (
        <>
          <button
            type="button"
            className={hasUnsavedContentChanges ? "primary save-dirty" : "primary"}
            onClick={onSaveContent}
            disabled={!activeType || Boolean(parsedJsonError) || validationIssuesLength > 0 || hasPendingRecordChanges || Boolean(recordDraftError) || isLoading || isSaving}
          >
            {isSaving ? "Saving..." : "Save"}
          </button>
          <button type="button" className="success" onClick={onAddRecord} disabled={Boolean(parsedJsonError) || isLoading || isSaving}>
            Add Record
          </button>
          <button type="button" className="danger" onClick={onDeleteRecord} disabled={isLoading || isSaving}>
            Delete Record
          </button>
        </>
      ) : (
        <>
          <button
            type="button"
            className={hasUnsavedConfigChanges ? "primary save-dirty" : "primary"}
            onClick={onSaveConfig}
            disabled={isReadOnlyColorsTab || isLoading || isSaving}
          >
            {isSaving ? "Saving..." : "Save"}
          </button>
          <button type="button" className="success" onClick={onAddConfigEntry} disabled={isReadOnlyColorsTab || isLoading || isSaving}>Add Record</button>
          <button type="button" className="danger" onClick={onDeleteConfigEntry} disabled={isReadOnlyColorsTab || !selectedConfigEntry || isLoading || isSaving}>Delete Record</button>
          <button type="button" onClick={() => onMoveConfigEntry(-1)} disabled={isReadOnlyColorsTab || !selectedConfigEntry || selectedConfigIndex <= 0 || isLoading || isSaving}>Move Up</button>
          <button type="button" onClick={() => onMoveConfigEntry(1)} disabled={isReadOnlyColorsTab || !selectedConfigEntry || selectedConfigIndex >= activeConfigEntriesLength - 1 || isLoading || isSaving}>Move Down</button>
        </>
      )}
      {error ? <p className="toolbar-error">{error}</p> : null}
    </div>
  );
}
