import React from "react";

type Element = {
  label: string;
  value: string;
  icon: React.ReactNode;
  description?: string;
  tooltip?: string;
  aliases?: string[];
};

type ElementSection = {
  title: string;
  elements: Element[];
  key: string;
  isCreatable: (element: Element) => boolean;
  disabledElementTooltip?: (label: string) => string;
};

type SelectedElementAction = {
  label: string;
  key: string;
  onClick: (element: Element) => void;
  isVisible?: boolean;
};

type SelectedElement = {
  id: string;
  kind: string;
  position: number;
  label: string;
  icon: React.ReactNode;
  isPending: boolean;
  actions:
    | SelectedElementAction[]
    | ((element: Element) => SelectedElementAction[]);
};

const ElementsPanel: React.FC<{
  elementSections: ElementSection[];
  addNewElementLabel?: string;
  addNewElement?: () => void;
  selectedElements: SelectedElement[];
  handleAddElement: (element: Element) => void;
  isElementVisible: (element: Element) => boolean;
  fixedFirstElement?: SelectedElement[] | SelectedElement;
  fixedLastElement?: SelectedElement;
  anchoredElementIds?: string[];
  isReorderDisabled?: boolean;
  isDragElementsDisabled?: boolean;
  isSelectedElementActionsDisabled?: boolean;
  handleSelectElement: (index: number) => void;
  selectedElementId: string;
  selectedElementActions:
    | SelectedElementAction[]
    | ((element: Element) => SelectedElementAction[]);
  addAllElements: () => void;
  isAddingAllElements?: boolean;
  showElementsFillButton?: boolean;
  isAddingNewElement?: boolean;
  selectedElementActionsTooltipProps?: Record<string, unknown>;
  renderElementsCount?: (count: number) => React.ReactNode;
}>;

const PropertiesPanel: React.FC<{
  children: React.ReactNode;
  id: string;
  onClose?: (id: string) => void;
}>;

export { ElementsPanel, PropertiesPanel };