import * as React from 'react';
import { ValuesOf } from '../utils/typeUtils';
import { SKINS, SIZES } from './ToggleSwitch.constants';

export interface ToggleSwitchProps {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component's root element.
   * @internal
   */
  className?: string;
  /** Assigns an unique identifier for the root element. */
  id?: string;
  /** Controls the skin of a toggle.
   * @default 'standard'
   */
  skin?: ToggleSwitchSkin;
  /** Controls the size of a toggle.
   * @default 'large'
   */
  size?: ToggleSwitchSize;
  /** Specifies whether toggle is checked. */
  checked?: boolean;
  /** Specifies whether toggle is disabled. */
  disabled?: boolean;
  /** Defines a callback that receives the input change event when the toggle state changes. */
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
  tabIndex?: number;
}

export class ToggleSwitch extends React.Component<ToggleSwitchProps> {}

export type ToggleSwitchSkin = ValuesOf<typeof SKINS>;
export type ToggleSwitchSize = ValuesOf<typeof SIZES>;