import React from 'react';
import { ButtonProps, InputProps } from '@bigbinary/neetoui';
import { LinkProps } from 'react-router-dom';

type BlockProps = {
  label: string;
  url?: string;
  icon?: React.ReactNode;
  count?: number;
  active?: boolean;
  onEdit?: (...args: any[]) => any;
  onClick?: (...args: any[]) => any;
  className?: string;
} & LinkProps & React.RefAttributes<HTMLAnchorElement> & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
type ItemProps = {
  label?: string;
  description?: string;
  active?: boolean;
  className?: string;
} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
type SubTitleProps = {
  iconProps?: ButtonProps[];
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
type SearchProps = {
  isCollapsed?: boolean;
  onCollapse?: React.MouseEventHandler<HTMLButtonElement>;
} & InputProps;
type AddNewProps = {
  label?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
/**
 *
 * Used in neeto products to show a collapsible menu which can be used for adding
 *
 * navigation options to view different sections.
 *
 * ![image](https://user-images.githubusercontent.com/12969853/225556542-ed4fd436-45d8-4eb5-8ffe-4a9e191d8fc1.png|height=200|width=300)
 *
 * @example 
 *
 * import MenuBar from "@bigbinary/neeto-molecules/MenuBar";
 * 
 * const MenuBarContainer = ({ children }) => {
 *   return (
 *     <div>
 *       <MenuBar showMenu />
 *     </div>
 *   );
 * };
 * @endexample
 * MenuBar with custom title
 *
 * @example 
 *
 * import MenuBar from "@bigbinary/neeto-molecules/MenuBar";
 * 
 * const MenuBarContainer = ({ children }) => {
 *   return (
 *     <div>
 *       <MenuBar showMenu title="Custom Title" />
 *     </div>
 *   );
 * };
 * @endexample
 * Props for MenuBar.Block:
 *
 * Props for MenuBar.AddNew:
 *
 * Props for MenuBar.SubTitle:
 *
 * Props for MenuBar.Search:
 *
 * Props for MenuBar.Item:
 *
 * @example 
 *
 * import MenuBar from "@bigbinary/neeto-molecules/MenuBar";
 * 
 * const MenuBarContainer = ({ children }) => {
 *   return (
 *     <div>
 *       <MenuBar showMenu title="Custom Title">
 *         <MenuBar.Block active count={13} label="All" />
 *         <MenuBar.SubTitle
 *           iconProps={[
 *             {
 *               icon: Search,
 *               onClick: () => {},
 *             },
 *           ]}
 *         >
 *           <Typography
 *             component="h4"
 *             style="h5"
 *             textTransform="uppercase"
 *             weight="bold"
 *           >
 *             Subtitle
 *           </Typography>
 *         </MenuBar.SubTitle>
 *         <MenuBar.Search isCollapsed={isSearchCollapsed} onCollapse={() => {}} />
 *         <MenuBar.AddNew label="Add new button" />
 *         <MenuBar.Item
 *           description="An Item which can have a subheading and heading"
 *           label="Heading"
 *         />
 *       </MenuBar>
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const MenuBar: React.FC<{
  title?: string;
  showMenu?: boolean;
  className?: string;
  children?: React.ReactNode | React.ReactNode[];
}> & {
  Block: React.FC<BlockProps>;
  Item: React.FC<ItemProps>;
  SubTitle: React.FC<SubTitleProps>;
  Search: React.FC<SearchProps>;
  AddNew: React.FC<AddNewProps>;
};

export { MenuBar as default };