/**
 *
 * ToggleSwitch is used to select a boolean value.
 *
 * @module ToggleSwitch
 *
 */
import { StyleValue } from 'vue';

import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import {
  ClassComponent,
  GlobalComponentConstructor,
  PassThrough,
} from '../ts-helpers.d';

export declare type ToggleSwitchPassThroughOptionType =
  | ToggleSwitchPassThroughAttributes
  | ((
      options: ToggleSwitchPassThroughMethodOptions,
    ) => ToggleSwitchPassThroughAttributes | string)
  | string
  | null
  | undefined;

/**
 * Custom passthrough(pt) option method.
 */
export interface ToggleSwitchPassThroughMethodOptions {
  /**
   * Defines instance.
   */
  instance: any;

  /**
   * Defines valid properties.
   */
  props: ToggleSwitchProps;

  /**
   * Defines current options.
   */
  context: ToggleSwitchContext;

  /**
   * Defines valid attributes.
   */
  attrs: any;

  /**
   * Defines parent options.
   */
  parent: any;

  /**
   * Defines passthrough(pt) options in global config.
   */
  global: object | undefined;
}

/**
 * Custom passthrough(pt) options.
 * @see {@link ToggleSwitchProps.pt}
 */
export interface ToggleSwitchPassThroughOptions {
  /**
   * Used to pass attributes to the root's DOM element.
   */
  root?: ToggleSwitchPassThroughOptionType;

  /**
   * Used to pass attributes to the input's DOM element.
   */
  input?: ToggleSwitchPassThroughOptionType;

  /**
   * Used to pass attributes to the slider's DOM element.
   */
  slider?: ToggleSwitchPassThroughOptionType;

  /**
   * Used to manage all lifecycle hooks.
   * @see {@link BaseComponent.ComponentHooks}
   */
  hooks?: ComponentHooks;
}

/**
 * Custom passthrough attributes for each DOM elements
 */
export interface ToggleSwitchPassThroughAttributes {
  [key: string]: any;
}

/**
 * Defines valid properties in ToggleSwitch component.
 */
export interface ToggleSwitchProps {
  /**
   * Enables triple state mode where the value can be 'null', 'true', or 'false'.
   *
   * - null: not checked
   * - true: checked
   * - false: partially checked
   *
   * @defaultValue false
   */
  triState?: boolean;

  /**
   * Specifies whether a ToggleSwitch should be checked or not.
   * @defaultValue false - when tristate = false
   * @defaultValue null - when tristate = true
   */
  modelValue?: boolean | string | null | undefined;

  /**
   * Value in checked state.
   * @defaultValue true
   */
  trueValue?: any;

  /**
   * Value in unchecked state.
   * @defaultValue false
   */
  falseValue?: any;

  /**
   * A string that defines the name of the input field.
   */
  label?: string;

  /**
   * Tooltip info about the checkbox.
   */
  tooltip?: string;
  /**
   * Tooltip position.
   *
   * @default 'top'
   */
  tooltipPos?: 'top' | 'right' | 'left' | 'bottom';

  /**
   * When present, it specifies that the component should have invalid state style.
   * @defaultValue false
   */
  invalid?: boolean | undefined;

  /**
   * When present, it specifies that the component should be disabled.
   * @defaultValue false
   */
  disabled?: boolean | undefined;

  /**
   * When present, it specifies that an input field is read-only.
   * @default false
   */
  readonly?: boolean | undefined;

  /**
   * Index of the element in tabbing order.
   */
  tabindex?: number | undefined;

  /**
   * Identifier of the underlying input element.
   */
  inputId?: string | undefined;

  /**
   * Style class of the input field.
   */
  inputClass?: string | object | undefined;

  /**
   * Inline style of the input field.
   */
  inputStyle?: StyleValue | undefined;

  /**
   * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
   */
  ariaLabelledby?: string | undefined;

  /**
   * Establishes a string value that labels the component.
   */
  ariaLabel?: string | undefined;

  /**
   * Used to pass attributes to DOM elements inside the component.
   * @type {ToggleSwitchPassThroughOptions}
   */
  pt?: PassThrough<ToggleSwitchPassThroughOptions>;

  /**
   * Used to configure passthrough(pt) options of the component.
   * @type {PassThroughOptions}
   */
  ptOptions?: PassThroughOptions;

  /**
   * When enabled, it removes component related styles in the core.
   * @defaultValue false
   */
  unstyled?: boolean;
}

/**
 * Defines current options in ToggleSwitch component.
 */
export interface ToggleSwitchContext {
  /**
   * Current checked state of the item as a boolean.
   * @defaultValue false
   */
  checked: boolean;

  /**
   * Current disabled state of the item as a boolean.
   * @defaultValue false
   */
  disabled: boolean;
}
/**
 * Defines valid emits in ToggleSwitch component.
 */
export type ToggleSwitchEmits = {
  /**
   * Emitted when the value changes.
   * @param {boolean} value - New value.
   */
  'update:modelValue': [value: boolean];

  /**
   * Callback to invoke on value change.
   * @param {Event} event - Browser event.
   */
  'change': [event: Event];

  /**
   * Callback to invoke when the component receives focus.
   * @param {Event} event - Browser event.
   */
  'focus': [event: Event];

  /**
   * Callback to invoke when the component loses focus.
   * @param {Event} event - Browser event.
   */
  'blur': [event: Event];
};

/**
 * **PrimeVue - ToggleSwitch**
 *
 * _ToggleSwitch is used to select a boolean value._
 *
 * [Live Demo](https://fewangsit.github.io/wangsvue/toggle)
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group Component
 *
 */
declare class ToggleSwitch extends ClassComponent<
  ToggleSwitchProps,
  unknown,
  ToggleSwitchEmits
> {}

declare module 'vue' {
  export interface GlobalComponents {
    ToggleSwitch: GlobalComponentConstructor<ToggleSwitch>;
  }
}

export default ToggleSwitch;