import type * as Components from "./src/index";
import type { LitElement } from "lit";
import type { DefineComponent } from "vue";

/**
 * Overrides for properties whose TypeScript type differs between
 * the Lit class and the HTML attribute interface.
 *
 * "form" — InputMixin's getter returns `HTMLFormElement | null`, but in
 * templates the attribute is always a plain string (the form's id).
 * Without this override, Vue/JSX would expect an HTMLFormElement.
 */
type WCPropsOverrides = { form: string };

type WCProps<TWebComponent extends HTMLElement> = Partial<
  Omit<TWebComponent, keyof LitElement | "render" | keyof WCPropsOverrides> &
    WCPropsOverrides
>;

interface NordComponents {
  "nord-avatar": DefineComponent<WCProps<Components.Avatar> & {}>;

  "nord-badge": DefineComponent<WCProps<Components.Badge> & {}>;

  "nord-banner": DefineComponent<WCProps<Components.Banner> & {}>;

  "nord-button": DefineComponent<WCProps<Components.Button> & {}>;

  "nord-button-group": DefineComponent<WCProps<Components.ButtonGroup> & {}>;

  "nord-calendar": DefineComponent<
    WCProps<Components.Calendar> & {
      /**
       * Dispatched when a date is selected and the value changes.
       */
      onChange?: (event: Event) => void;

      /**
       * Dispatched when the calendar's focused date changes.
       */
      onNordFocusDate?: (event: Event) => void;
    }
  >;

  "nord-card": DefineComponent<WCProps<Components.Card> & {}>;

  "nord-checkbox": DefineComponent<
    WCProps<Components.Checkbox> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;
    }
  >;

  "nord-command-menu": DefineComponent<
    WCProps<Components.CommandMenu> & {
      /**
       * The command menu was closed.
       */
      onClose?: (event: Event) => void;

      /**
       * Fired as the user types into the search input.
       */
      onInput?: (event: Event) => void;

      /**
       * User selected a command from the menu.
       */
      onNordSelect?: (event: Event) => void;

      /**
       * The command menu was opened.
       */
      onOpen?: (event: Event) => void;
    }
  >;

  "nord-date-picker": DefineComponent<
    WCProps<Components.DatePicker> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Dispatched when the popout is closed.
       */
      onClose?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;

      /**
       * Dispatched when the calendar's focused date changes.
       */
      onNordFocusDate?: (event: Event) => void;

      /**
       * Dispatched when the popout is opened.
       */
      onOpen?: (event: Event) => void;
    }
  >;

  "nord-divider": DefineComponent<WCProps<Components.Divider> & {}>;

  "nord-drawer": DefineComponent<WCProps<Components.Drawer> & {}>;

  "nord-dropdown": DefineComponent<
    WCProps<Components.Dropdown> & {
      /**
       * Dispatched when the popout is closed.
       */
      onClose?: (event: Event) => void;

      /**
       * Dispatched when the popout is opened.
       */
      onOpen?: (event: Event) => void;
    }
  >;

  "nord-dropdown-group": DefineComponent<
    WCProps<Components.DropdownGroup> & {}
  >;

  "nord-dropdown-item": DefineComponent<WCProps<Components.DropdownItem> & {}>;

  "nord-dropdown-submenu": DefineComponent<
    WCProps<Components.DropdownSubmenu> & {
      /**
       * Forwarded from the internal nord-popout.
       */
      onClose?: (event: Event) => void;

      /**
       * Fired when mobile stack navigation activates this submenu.
       */
      onNordSubmenuNavigate?: (event: Event) => void;

      /**
       * Forwarded from the internal nord-popout.
       */
      onOpen?: (event: Event) => void;
    }
  >;

  "nord-empty-state": DefineComponent<WCProps<Components.EmptyState> & {}>;

  "nord-fieldset": DefineComponent<WCProps<Components.Fieldset> & {}>;

  "nord-footer": DefineComponent<WCProps<Components.Footer> & {}>;

  "nord-header": DefineComponent<WCProps<Components.Header> & {}>;

  "nord-icon": DefineComponent<WCProps<Components.Icon> & {}>;

  "nord-input": DefineComponent<
    WCProps<Components.Input> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;

      /**
       * Fired when some text has been selected.
       */
      onSelect?: (event: Event) => void;
    }
  >;

  "nord-layout": DefineComponent<WCProps<Components.Layout> & {}>;

  "nord-message": DefineComponent<WCProps<Components.Message> & {}>;

  "nord-modal": DefineComponent<
    WCProps<Components.Modal> & {
      /**
       * Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.
       */
      onCancel?: (event: Event) => void;

      /**
       * Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.
       */
      onClose?: (event: Event) => void;

      /**
       * undefined
       */
      onCloseTrigger?: (event: Event) => void;

      /**
       * undefined
       */
      onTrigger?: (event: Event) => void;
    }
  >;

  "nord-nav-group": DefineComponent<
    WCProps<Components.NavGroup> & {
      /**
       * Dispatched whenever a nav item has been marked as active
       */
      onActivate?: (event: Event) => void;

      /**
       * Dispatched whenever a nav item's state changes between open and closed.
       */
      onToggle?: (event: Event) => void;
    }
  >;

  "nord-navigation": DefineComponent<
    WCProps<Components.Navigation> & {
      /**
       * Dispatched whenever a nav item has been marked as active
       */
      onActivate?: (event: Event) => void;

      /**
       * Dispatched whenever a nav item's state changes between open and closed.
       */
      onToggle?: (event: Event) => void;
    }
  >;

  "nord-nav-item": DefineComponent<
    WCProps<Components.NavItem> & {
      /**
       * Dispatched whenever a nav item has been marked as active
       */
      onActivate?: (event: Event) => void;

      /**
       * Dispatched whenever a nav item's state changes between open and closed.
       */
      onToggle?: (event: Event) => void;
    }
  >;

  "nord-nav-toggle": DefineComponent<WCProps<Components.NavToggle> & {}>;

  "nord-notification": DefineComponent<
    WCProps<Components.Notification> & {
      /**
       * Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
       */
      onDismiss?: (event: Event) => void;
    }
  >;

  "nord-notification-group": DefineComponent<
    WCProps<Components.NotificationGroup> & {
      /**
       * Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
       */
      onDismiss?: (event: Event) => void;
    }
  >;

  "nord-popout": DefineComponent<
    WCProps<Components.Popout> & {
      /**
       * Dispatched when the popout is closed.
       */
      onClose?: (event: Event) => void;

      /**
       * Dispatched when the popout is opened.
       */
      onOpen?: (event: Event) => void;
    }
  >;

  "nord-progress": DefineComponent<WCProps<Components.Progress> & {}>;

  "nord-progress-bar": DefineComponent<WCProps<Components.ProgressBar> & {}>;

  "nord-qrcode": DefineComponent<WCProps<Components.Qrcode> & {}>;

  "nord-radio": DefineComponent<
    WCProps<Components.Radio> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;
    }
  >;

  "nord-range": DefineComponent<
    WCProps<Components.Range> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;
    }
  >;

  "nord-segmented-control": DefineComponent<
    WCProps<Components.SegmentedControl> & {
      /**
       * Fired whenever a segmented control item has been checked.
       */
      onChange?: (event: Event) => void;
    }
  >;

  "nord-segmented-control-item": DefineComponent<
    WCProps<Components.SegmentedControlItem> & {
      /**
       * Fired whenever the segmented control item has been checked.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;
    }
  >;

  "nord-select": DefineComponent<
    WCProps<Components.Select> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;
    }
  >;

  "nord-skeleton": DefineComponent<WCProps<Components.Skeleton> & {}>;

  "nord-spinner": DefineComponent<WCProps<Components.Spinner> & {}>;

  "nord-stack": DefineComponent<WCProps<Components.Stack> & {}>;

  "nord-tab": DefineComponent<WCProps<Components.Tab> & {}>;

  "nord-tab-group": DefineComponent<WCProps<Components.TabGroup> & {}>;

  "nord-table": DefineComponent<WCProps<Components.Table> & {}>;

  "nord-tab-panel": DefineComponent<WCProps<Components.TabPanel> & {}>;

  "nord-tag": DefineComponent<
    WCProps<Components.Tag> & {
      /**
       * Fired whenever the tag has been checked or unchecked via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.
       */
      onRemove?: (event: Event) => void;
    }
  >;

  "nord-tag-group": DefineComponent<
    WCProps<Components.TagGroup> & {
      /**
       * Fired whenever a tag has been checked or unchecked via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.
       */
      onRemove?: (event: Event) => void;
    }
  >;

  "nord-textarea": DefineComponent<
    WCProps<Components.Textarea> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;

      /**
       * Fired when some text has been selected.
       */
      onSelect?: (event: Event) => void;
    }
  >;

  "nord-toast": DefineComponent<
    WCProps<Components.Toast> & {
      /**
       * Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
       */
      onDismiss?: (event: Event) => void;
    }
  >;

  "nord-toast-group": DefineComponent<
    WCProps<Components.ToastGroup> & {
      /**
       * Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
       */
      onDismiss?: (event: Event) => void;
    }
  >;

  "nord-toggle": DefineComponent<
    WCProps<Components.Toggle> & {
      /**
       * Fired whenever the input's value is changed via user interaction.
       */
      onChange?: (event: Event) => void;

      /**
       * Fired as the user types into the input.
       */
      onInput?: (event: Event) => void;
    }
  >;

  "nord-tooltip": DefineComponent<WCProps<Components.Tooltip> & {}>;

  "nord-top-bar": DefineComponent<WCProps<Components.TopBar> & {}>;

  "nord-visually-hidden": DefineComponent<
    WCProps<Components.VisuallyHidden> & {}
  >;
}

declare module "vue" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface GlobalComponents extends NordComponents {}
}

declare global {
  namespace JSX {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface IntrinsicElements extends NordComponents {}
  }
}