import React from 'react';
import { TooltipProps, CheckboxProps, InputProps, DropdownProps } from 'neetoui';
import { Filters } from 'neetofilters';

type ColumnData = {
  dataIndex: string;
  title: string;
  key: string;
};
type DownloadButtonProps = {
  count?: number;
  onClick: () => void;
  "data-testid"?: string;
  tooltipProps?: Partial<TooltipProps>;
};
type DataProps = {
  totalCount?: number;
};
type ColumnsButtonProps = {
  actionBlock?: React.ReactNode;
  checkboxProps?: Partial<CheckboxProps>;
  columnData?: ColumnData[];
  isSearchable?: boolean;
  tableKey?: string;
  noColumnMessage?: string;
  searchProps?: Partial<InputProps>;
};
interface RightBlockComposition {
  RightBlock: React.FC<{
    downloadButtonProps?: DownloadButtonProps;
    filterProps?: React.ComponentProps<typeof Filters>;
    columnsButtonProps?: ColumnsButtonProps & DropdownProps;
    dataProps?: DataProps;
  }>;
}
/**
 *
 * The SubHeader component is used alongside the header component to display
 *
 * additional information or actions.
 *
 * @example 
 *
 * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";
 * 
 * const App = () => (
 *   <SubHeader
 *     leftActionBlock={
 *       <Typography component="h4" style="h4">
 *         118 Contacts
 *       </Typography>
 *     }
 *     rightActionBlock={
 *       <>
 *         <Button icon={Delete} label="Delete" style="secondary" />
 *         <Button label="Disable" style="secondary" />
 *       </>
 *     }
 *   />
 * );
 * @endexample
 * @example 
 *
 * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";
 * 
 * const App = () => (
 *   <SubHeader
 *     leftActionBlock={
 *       <Typography component="h4" style="h4">
 *         118 Contacts
 *       </Typography>
 *     }
 *     rightActionBlock={
 *       <SubHeader.RightBlock
 *         downloadButtonProps={{
 *           onClick: download(),
 *           tooltipProps: {
 *             content: "Download all data",
 *             position: "top"
 *           }
 *         }}
 *         filterProps={
 *           {
 *              NeetoFilters props 
 *           }
 *         }
 *         columnsButtonProps={
 *           {
 *              Columns props 
 *           }
 *         }
 *         dataProps={{
 *           totalCount: 13,
 *         }}
 *       />
 *     }
 *   />
 * );
 * @endexample
*/
declare const SubHeader: React.FC<{
  className?: string;
  "data-testid"?: string;
  leftActionBlock?: React.ReactNode;
  rightActionBlock?: React.ReactNode;
}> & RightBlockComposition;

export { SubHeader as default };