import * as React from 'react';
import { IconElement, TooltipCommonProps } from '../common';

export interface SegmentedToggleProps {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Specifies the initially selected option. */
  defaultSelected?: React.ReactNode;
  /** Specifies whether an option is selected. */
  selected?: React.ReactNode;
  /** Controls the size of the segmented toggle.
   * @default 'medium'
   */
  size?: 'tiny' | 'small' | 'medium';
  /** Defines a callback function which is called every time option is clicked. Returns a selected element and its value. */
  onClick?: (event: React.SyntheticEvent, value: string) => void;
  /** Defines a keyboard callback; calling `preventDefault()` prevents arrow-key navigation. */
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
  /** Specifies whether interactions are disabled. */
  disabled?: boolean;
  /** Accepts <SegmentedToggle.Icon/> or <SegmentedToggle.Button/> as child items to list down available options. */
  children: any[];
  /** Accessible label for the segmented toggle group. */
  ariaLabel?: string;
  /** ID of element that labels the segmented toggle group. */
  ariaLabelledby?: string;
  /** Makes the container take up entire width. */
  fullWidth?: boolean;
}

export type SegmentedToggleButtonProps = Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'onFocus' | 'onBlur' | 'type'
> & {
  /** Accepts an icon to display before the label. It's sized to 18px when `size` is `small` or `tiny`, and 24px otherwise. */
  prefixIcon?: IconElement;
  /** Sets the value that identifies the option. `<SegmentedToggle/>` compares it with `selected` to mark the option as selected, and passes it to `onClick`. */
  value?: string;
  /** Specifies whether an option is selected. */
  selected?: boolean;
  /** Specifies whether interactions are disabled. */
  disabled?: boolean;
  /** Controls the size of the segmented toggle.
   * @default 'medium'
   */
  size?: 'small' | 'medium' | 'tiny';
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /**
   * Has no effect, and never had one. `<SegmentedToggle.Button/>` doesn't call it when the button receives focus.
   * @deprecated Has no effect. Remove it.
   */
  focusableOnFocus?: React.FocusEventHandler<HTMLButtonElement>;
  /**
   * Has no effect, and never had one. `<SegmentedToggle.Button/>` doesn't call it when the button loses focus.
   * @deprecated Has no effect. Remove it.
   */
  focusableOnBlur?: React.FocusEventHandler<HTMLButtonElement>;
  'aria-checked'?: boolean;
};

export declare const SegmentedToggleButton: React.FC<SegmentedToggleButtonProps>;

export type SegmentedToggleIconProps = Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'onFocus' | 'onBlur' | 'type'
> & {
  /** Specifies whether an option is selected. */
  selected?: boolean;
  /** Sets the value that identifies the option. `<SegmentedToggle/>` compares it with `selected` to mark the option as selected, and passes it to `onClick`. */
  value?: string;
  /** Sets the content of the tooltip shown when hovering the icon. */
  tooltipText?: string;
  /** Allows to pass all common tooltip props. `tooltipText` always sets the tooltip content.
   * @linkTypeTo Tooltip
   * @setTypeName TooltipCommonProps
   */
  tooltipProps?: TooltipCommonProps;
  /** Specifies whether interactions are disabled. */
  disabled?: boolean;
  /** Controls the size of the segmented toggle.
   * @default 'medium'
   */
  size?: 'small' | 'medium' | 'tiny';
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  'data-click'?: string;
  /** Defines a callback function which is called when the icon button receives focus. */
  focusableOnFocus?: React.FocusEventHandler<HTMLButtonElement>;
  /** Defines a callback function which is called when the icon button loses focus. */
  focusableOnBlur?: React.FocusEventHandler<HTMLButtonElement>;
  'aria-checked'?: boolean;
};
export class SegmentedToggleIcon extends React.Component<SegmentedToggleIconProps> {}

export class SegmentedToggle extends React.Component<SegmentedToggleProps> {
  static Button: typeof SegmentedToggleButton;
  static Icon: typeof SegmentedToggleIcon;
}