import * as React from "react";

interface FlexTabProps {
  /**
   * The name of the tab list
   */
  name?: string;

  /**
   * The list of tabs to show
   */
  tabs?: Array<{
    id: string;
    name: string;
    caption: string;
    icon: string;
    isActive: string;
    customAction: () => void;
    style: React.CSSProperties;
  }>;

  /**
   * Whether or not the tabs have a dropdown menu of actions
   */
  enableTabDropdowns?: boolean;

  /**
   * Whether or not the user can trigger the tab action dropdown via right-click
   */
  enableContextMenu?: boolean;

  /**
   * The list of actions that are avaiable for each tab to take (will show in the dropdown)
   */
  tabActions?: Array<{
    id: string;
    label: string;
    icon: string;
    onSelect: () => void;
  }>;

  /**
   * Whether or not the tabs can be renamed
   */
  canRename?: boolean;

  /**
   * Whether or not the tabs can be dragged/re-ordered
   */
  canDrag?: boolean;

  /**
   * The action to take when there are more tabs than the container permits
   */
  overflow?: boolean;

  /**
   * Whether or not an add button is showing that allows the creation of more tabs
   */
  canAdd?: boolean;

  /**
   * The component to use (instead of the default) to wrap each tab item
   */
  componentWrapper?: JSX.Element;

  /**
   * The style to apply to the tab container
   */
  style?: React.CSSProperties;

  /**
   * The component to use (instead of the default) to replace each tab item
   */
  tabComponent?: JSX.Element;

  /**
   * Whether the tabs should appear vertically or not
   */
  vertical?: boolean;

  /**
   * Triggers when the tab is switched
   */
  onTabSwitch?: () => void;

  /**
   * Triggers when the tab is renamed
   */
  onTabRename?: () => void;

  /**
   * Triggers when the tab is deleted
   */
  onTabDelete?: () => void;

  /**
   * Triggers when a tab is created
   */
  onTabCreate?: () => void;
}

/**
 * An advanced, flexible tabs/tab manager
 */
const FlexTab: React.FC<FlexTabProps> = ({ children }) => {
  /**
   * Switches the tab from one to another
   * @params
   */
  const switchTab = (): void => {};

  return <div>{children}</div>;
};

export default FlexTab;