import type { SyntheticEvent, MouseEventHandler } from 'react';
import type { IconButtonProps } from '@mui/material/IconButton';
import type { AvatarProps } from '../avatar';
import type { BadgeProps } from '@mui/material/Badge';
import type { LinkProps } from '../@navigation/link';
import createClasses from './styles';

interface UserControlsProps {
  /**
   * Name to be displayed.
   */
  name: string;
  /**
   * User role to be displayed.
   */
  userRole: Roles;
  /**
   * Props to be supplied directly into the avatar component.
   */
  avatarProps?: AvatarProps;
  /**
   * Props to be supplied directly into the badge component.
   */
  notificationBadgeProps?: BadgeProps;
  /**
   * Enables vertical dividers rendering.
   */
  showDividers?: boolean;
  /**
   * Controls visibility of the search icon.
   */
  showIconSearch?: boolean;
  /**
   * Controls visibility of the settings icon.
   */
  showIconSettings?: boolean;
  /**
   * Controls visibility of the notification icon.
   */
  showIconNotification?: boolean;
  /**
   * List of buttons, each button may contain icon and/or title with optional link.
   */
  iconButtons?: IconButtonLink[];
  /**
   * Callback to be fired on the user arrow icon click.
   */
  userArrowCallback?:
    | MouseEventHandler<HTMLSpanElement | HTMLDivElement> & MouseEventHandler<SVGSVGElement>;
  /**
   * Callback to be fired on notification icon button click instead of linking to another page.
   */
  handleNotificationClick?: IconButtonProps['onClick'];
  /**
   * when isNotificationOpen its true the Notification icon color will be blue.
   */
  isNotificationOpen?: boolean;
  /**
   * Override classes.
   */
  classes?: Partial<ReturnType<typeof createClasses>>;
}

type IconButtonLink = {
  /**
   * Props which will be passed directly into the link component.
   */
  linkProps?: LinkProps;
  /**
   * The URL to link to when the button is clicked.
   * @deprecated Should use callbacks instead
   */
  href?: string;
  /**
   * Icon to be displayed placed before the title.
   */
  icon?: {
    src: string;
  };
  /**
   * Title text (optional).
   */
  title?: string;
  /**
   * Callback fired when the component is clicked.
   */
  onClick?: (e?: SyntheticEvent) => void;
  /**
   * Atribute for automation QA test.
   */
  testqa?: string;
};

type Roles = 'User' | 'Admin' | 'CS_Admin' | 'Developer';

export type { IconButtonLink, Roles, UserControlsProps };