import React from "react";
import { PlusToggle as PlusToggleElement } from "../dist/components/toggle/index.js";

export type { PlusToggleElement };

export interface PlusToggleProps
  extends Pick<
    React.AllHTMLAttributes<HTMLElement>,
    | "children"
    | "dir"
    | "hidden"
    | "id"
    | "lang"
    | "slot"
    | "style"
    | "title"
    | "translate"
    | "onClick"
    | "onFocus"
    | "onBlur"
  > {
  /** undefined */
  checked?: boolean;

  /** undefined */
  error?: boolean;

  /** undefined */
  disabled?: boolean;

  /** undefined */
  readonly?: boolean;

  /** undefined */
  required?: boolean;

  /** undefined */
  fullWidth?: boolean;

  /** undefined */
  name?: PlusToggleElement["name"];

  /** undefined */
  value?: PlusToggleElement["value"];

  /** undefined */
  size?: PlusToggleElement["size"];

  /** undefined */
  label?: PlusToggleElement["label"];

  /** undefined */
  caption?: PlusToggleElement["caption"];

  /** undefined */
  text?: PlusToggleElement["text"];

  /** undefined */
  textPosition?: PlusToggleElement["textPosition"];

  /** undefined */
  toggleIcon?: PlusToggleElement["toggleIcon"];

  /** undefined */
  toggleActiveIcon?: PlusToggleElement["toggleActiveIcon"];

  /** undefined */
  toggleInActiveIcon?: PlusToggleElement["toggleInActiveIcon"];

  /** undefined */
  errorMessage?: PlusToggleElement["errorMessage"];

  /** undefined */
  animation?: PlusToggleElement["animation"];

  /** undefined */
  customAriaLabel?: PlusToggleElement["customAriaLabel"];

  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
  className?: string;

  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;

  /** Used for labels to link them with their inputs (using input id). */
  htmlFor?: string;

  /** Used to help React identify which items have changed, are added, or are removed within a list. */
  key?: number | string;

  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;

  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
  ref?: any;

  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
  tabIndex?: number;

  /** Emitted when the toggle state changes */
  onPlusChange?: (event: CustomEvent) => void;

  /** Emitted when the toggle state changes (for input event compatibility) */
  onPlusInput?: (event: CustomEvent) => void;

  /** Emitted when the toggle gains focus */
  onPlusFocus?: (event: CustomEvent) => void;

  /** Emitted when the toggle loses focus */
  onPlusBlur?: (event: CustomEvent) => void;

  /** Emitted when the toggle validation fails */
  onPlusInvalid?: (event: CustomEvent) => void;
}

/**
 * Toggle component that provides a switch with various styles and states.
 * ---
 *
 *
 * ### **Events:**
 *  - **plus-change** - Emitted when the toggle state changes
 * - **plus-input** - Emitted when the toggle state changes (for input event compatibility)
 * - **plus-focus** - Emitted when the toggle gains focus
 * - **plus-blur** - Emitted when the toggle loses focus
 * - **plus-invalid** - Emitted when the toggle validation fails
 *
 * ### **Methods:**
 *  - **checkValidity(): __** - Checks the validity of the toggle input
 * - **reportValidity(): __** - Reports the validity of the toggle input
 * - **setCustomValidity(message: _string_): _void_** - Sets a custom validity message for the toggle
 *
 * ### **Slots:**
 *  - _default_ - The default slot for toggle text content when no text property is specified
 *
 * ### **CSS Properties:**
 *  - **--text-color** - Controls the text color _(default: undefined)_
 * - **--border-color** - Controls the border color of the toggle _(default: undefined)_
 * - **--switch-bg** - Controls the background color of the switch _(default: undefined)_
 * - **--switch-bg-hover** - Controls the background color when hovered _(default: undefined)_
 * - **--switch-bg-active** - Controls the background color when pressed _(default: undefined)_
 * - **--dot-bg** - Controls the background color of the dot _(default: undefined)_
 * - **--dot-text** - Controls the text color of the icon in the dot _(default: undefined)_
 *
 * ### **CSS Parts:**
 *  - **base** - The component's base wrapper
 * - **label** - The label element
 * - **control** - The control element containing the toggle and text
 * - **switch** - The switch element
 * - **dot** - The dot element inside the switch
 * - **text** - The text element
 * - **icon** - The icon element when an icon is used
 * - **caption** - The caption element
 */
export const PlusToggle: React.ForwardRefExoticComponent<PlusToggleProps>;