import React from 'react';
import { ButtonProps } from '@bigbinary/neetoui';
import Rename from './Rename.js';

interface NavLinkProps {
  activeClassName?: string | undefined;
  activeStyle?: React.CSSProperties | undefined;
  disabled?: boolean | undefined;
  exact?: boolean | undefined;
  strict?: boolean | undefined;
  isActive?: () => boolean;
}
type TooltipPropType = {
  content: string;
  position: string;
};
type HomeButtonPropType = {
  tooltip: TooltipPropType;
  icon: React.ReactNode;
};
type MenuItemPropType = {
  key: string;
  label: string;
  onClick?: () => void;
  disabled?: boolean;
  isDisabled?: boolean;
  tooltipProps?: {
    content: string;
  };
};
type MoreOptionsPropType = {
  isVertical?: boolean;
  dropdownButtonProps?: {
    size?: string;
    className?: string;
  };
  menuItems?: MenuItemPropType[];
};
type HeaderLinkPropType = {
  key: string;
  to: string;
  label: string;
  className?: string;
  labelProps?: {
    lineHeight?: string;
  };
  moreOptions?: MoreOptionsPropType;
} & NavLinkProps;
type RightActionBlockPropTypes = {
  isDraftBlockHidden: boolean;
  previewDraftUrl: string;
  isResetDraftButtonVisible: boolean;
  onResetClick: () => void;
  isResetting: boolean;
  isPublishDisabled: boolean;
  isPublishing: boolean;
  handlePublish: () => void;
  isPublishPreviewDisabled: boolean;
  previewPublishedUrl: string;
  isPublishButtonVisible: boolean;
  isResetAlertOpen: boolean;
  setIsResetAlertOpen: () => void;
  handleReset: () => void;
  publishAlertTitle: string;
  publishAlertDescription: string;
  publishButtonProps: ButtonProps;
};
type NavigationLinkPropsType = {
  headerLinks: HeaderLinkPropType[];
  maxVisibleLinks?: number;
};
type OverflowLinksPropsType = {
  overflowLinks: HeaderLinkPropType[];
};
type LeftBlockPropTypes = {
  homeButtonProps?: HomeButtonPropType;
  homeUrl: string;
  renameProps?: Rename;
  children?: React.ReactNode;
};
/**
 *
 * A common component to use as navigation header with support for nested dropdown menus.
 *
 * @example 
 *
 * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
 * 
 * const Page = () => (
 *   <NavigationHeader
 *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
 *     rightActionBlock={
 *       <NavigationHeader.RightActionBlock {...rightBlockProps} />
 *     }
 *     navigationLinks={
 *       <NavigationHeader.NavigationLinks {...navigationLinkProps} />
 *     }
 *   />
 * );
 * @endexample
 * To specify the content to be rendered in the left side of the
 *
 * NavigationHeader.
 *
 * @example 
 *
 * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
 * 
 * const Page = () => (
 *   <NavigationHeader
 *     leftActionBlock={
 *       <NavigationHeader.LeftActionBlock
 *         homeButtonProps={{ tooltip: { position: "right" } }}
 *         homeUrl={homeUrl}
 *         renameProps={{
 *           disabled: false,
 *           dropdownItems: [{ label: "Clone", onClick: noop }],
 *           placeholder: "Enter a name",
 *           value: "Feedback form",
 *           onRename: () => noop,
 *         }}
 *       />
 *     }
 *     rightActionBlock={
 *       <NavigationHeader.RightActionBlock {...rightBlockProps} />
 *     }
 *     navigationLinks={
 *       <NavigationHeader.NavigationLinks {...navigationLinkProps} />
 *     }
 *   />
 * );
 * @endexample
 * To specify the content to be rendered at the center of the NavigationHeader.
 *
 * Each object in the headerLinks array can have the following properties:
 *
 * @example 
 *
 * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
 * 
 * const Page = () => (
 *   <NavigationHeader
 *     navigationLinks={
 *       <NavigationHeader.NavigationLinks
 *         headerLinks={[
 *           {
 *             key: "build",
 *             to: "/build",
 *             label: "Build",
 *             className: "custom-link-class"
 *           },
 *           {
 *             key: "design",
 *             to: "/design",
 *             label: "Design",
 *             labelProps: { lineHeight: "tight" }
 *           },
 *           {
 *             key: "configure",
 *             to: "/configure",
 *             label: "Configure",
 *             exact: true, // Additional props passed to Navlink component
 *             moreOptions: {
 *               isVertical: true,
 *               dropdownButtonProps: {
 *                 size: "small",
 *                 className: "custom-dropdown-class"
 *               },
 *               menuItems: [
 *                 {
 *                   key: "settings",
 *                   label: "Settings",
 *                   onClick: () => console.log("Settings clicked")
 *                 },
 *                 {
 *                   key: "preferences",
 *                   label: "Preferences",
 *                   disabled: true,
 *                   tooltipProps: {
 *                     content: "This feature is coming soon"
 *                   }
 *                 }
 *               ]
 *             }
 *           },
 *         ]}
 *         maxVisibleLinks={3}
 *       />
 *     }
 *     rightActionBlock={
 *       <NavigationHeader.RightActionBlock {...rightBlockProps} />
 *     }
 *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
 *   />
 * );
 * @endexample
 * To specify the content to be rendered in the right side of the
 *
 * NavigationHeader
 *
 * @example 
 *
 * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
 * 
 * const Page = () => (
 *   <NavigationHeader
 *     rightActionBlock={
 *       <NavigationHeader.RightActionBlock
 *         isPublishButtonVisible={false}
 *         previewDraftUrl="/preview/draft"
 *         isDraftBlockHidden={false}
 *         isResetDraftButtonVisible={true}
 *         isResetting={false}
 *         onResetClick={noop}
 *         isPublishDisabled={true}
 *         isPublishing={false}
 *         handlePublish={noop}
 *         isPublishPreviewDisabled={true}
 *         previewPublishedUrl="/preview/published"
 *         setIsResetAlertOpen={noop}
 *         handleReset={noop}
 *       />
 *     }
 *     navigationLinks={
 *       <NavigationHeader.NavigationLinks {...navigationLinkProps} />
 *     }
 *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
 *   />
 * );
 * @endexample
*/
declare const NavigationHeader: React.FC<{
  leftActionBlock?: React.ReactNode;
  navigationLinks?: React.ReactNode;
  rightActionBlock?: React.ReactNode;
}> & {
  RightActionBlock: React.FC<RightActionBlockPropTypes>;
  NavigationLinks: React.FC<NavigationLinkPropsType>;
  LeftActionBlock: React.FC<LeftBlockPropTypes>;
  OverflowLinks: React.FC<OverflowLinksPropsType>;
};

export { NavigationHeader as default };