import { TooltipProps } from '@bigbinary/neetoui';

type Element = {
  label: string;
  value: string;
  icon: React.ReactNode;
};
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[]);
};
/**
 *
 * @example 
 *
 * import Container from "@bigbinary/neeto-molecules/Container";
 * import {
 *   ElementsPanel,
 *   PropertiesPanel,
 * } from "@bigbinary/neeto-molecules/Builder";
 * import Configure from "./Configure";
 * 
 * const Component = () => (
 *   <Container isHeaderFixed>
 *     <div className="flex h-full w-full justify-between">
 *       <ElementsPanel
 *         elementSections={sections}
 *         {...{
 *           handleAddElement,
 *           isElementVisible,
 *           selectedElements,
 *           fixedFirstElement,
 *           fixedLastElement,
 *         }}
 *         selectedElementActions={[
 *           {
 *             label: "Duplicate",
 *             key: "duplicate",
 *             onClick: element => alert("Clicked", JSON.stringify(element)),
 *           },
 *           {
 *             label: "Delete",
 *             key: "delete",
 *             onClick: element => alert("Clicked", JSON.stringify(element)),
 *           },
 *         ]}
 *       />
 *       <PropertiesPanel
 *         onClose={id => alert("The panel is closed :", id)}
 *         id={selectedRecord.id}
 *       >
 *         {selectedRecord.id ? <Configure /> : <PropertiesPanel.EmptyProperty />}
 *       </PropertiesPanel>
 *     </div>
 *   </Container>
 * );
 * @endexample
*/
declare 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?: Partial<TooltipProps>;
  renderElementsCount?: (count: number) => React.ReactNode;
}>;
declare const PropertiesPanel: React.FC<{
  children: React.ReactNode;
  id: string;
  onClose?: (id: string) => void;
}>;

export { ElementsPanel, PropertiesPanel };