/**
 *
 * InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message.
 *
 * @module inlinemessage
 *
 */
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';

export declare type InlineMessagePassThroughOptionType =
  | InlineMessagePassThroughAttributes
  | ((
      options: InlineMessagePassThroughMethodOptions,
    ) => InlineMessagePassThroughAttributes | string)
  | string
  | null
  | undefined;

/**
 * Custom passthrough(pt) option method.
 */
export interface InlineMessagePassThroughMethodOptions {
  /**
   * Defines instance.
   */
  instance: any;
  /**
   * Defines valid properties.
   */
  props: InlineMessageProps;
  /**
   * Defines current inline state.
   */
  state: InlineMessageState;
  /**
   * 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 InlineMessageProps.pt}
 */
export interface InlineMessagePassThroughOptions {
  /**
   * Used to pass attributes to the root's DOM element.
   */
  root?: InlineMessagePassThroughOptionType;
  /**
   * Used to pass attributes to the icon's DOM element.
   */
  icon?: InlineMessagePassThroughOptionType;
  /**
   * Used to pass attributes to the text's DOM element.
   */
  text?: InlineMessagePassThroughOptionType;
  /**
   * Used to manage all lifecycle hooks.
   * @see {@link BaseComponent.ComponentHooks}
   */
  hooks?: ComponentHooks;
}

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

/**
 * Defines current inline state in InlineMessage component.
 */
export interface InlineMessageState {
  /**
   * Current visible state as a boolean.
   * @defaultValue false
   */
  visible: boolean;
}

/**
 * Defines valid emits in InlineMessage component.
 */
export type InlineMessageEmits = {
  /**
   * Emits when close button is clicked.
   */
  close: [];
};

/**
 * Defines valid properties in InlineMessage component.
 */
export interface InlineMessageProps {
  /**
   * Severity level of the message.
   * @default 'secondary'
   */
  severity?: 'success' | 'danger' | 'secondary' | undefined;
  /**
   * The title.
   */
  title?: string | undefined;
  /**
   * The message.
   */
  message?: string | undefined;
  /**
   * The list of item to be displayed after message.
   */
  lists?: string[] | undefined;
  /**
   * Wether show the Message Icon.
   *
   * @default true
   */
  showIcon?: boolean;
  /**
   * Wether the message is removable by close button.
   *
   * @default true
   */
  removable?: boolean;
  /**
   * The message section additional class.
   */
  messageWrapperClass?: string | string[];
  listClass?: string | string[];
  itemWrapperClass?: string | string[];
  itemClass?: string | string[];
  /**
   * Whether to show the loading state of the component.
   *
   * @default false
   */
  loading?: boolean;
}

/**
 * **Wangsvue - InlineMessage**
 *
 * _InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message._
 *
 * @group Component
 *
 */
declare class InlineMessage extends ClassComponent<
  InlineMessageProps,
  unknown,
  InlineMessageEmits
> {}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    InlineMessage: GlobalComponentConstructor<InlineMessage>;
  }
}

export default InlineMessage;