import { Property, NotifyPropertyChanges, INotifyPropertyChanged, Component, isBlazor, isRippleEnabled } from '@syncfusion/ej2-base';import { addClass, Event, EmitType, detach, removeClass } from '@syncfusion/ej2-base';import { rippleEffect, EventHandler, Observer, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { getTextNode } from '../common/common';
import {IconPosition,ClickedEventArgs} from "./button";
import {ComponentModel} from '@syncfusion/ej2-base';

/**
 * Interface for a class Button
 */
export interface ButtonModel extends ComponentModel{

    /**
     * Positions the icon before/after the text content in the Button.
     * The possible values are:
     * * Left: The icon will be positioned to the left of the text content.
     * * Right: The icon will be positioned to the right of the text content.
     *
     * @isenumeration true
     * @default IconPosition.Left
     * @asptype IconPosition
     */
    iconPosition?: string | IconPosition;

    /**
     * Defines class/multiple classes separated by a space for the Button that is used to include an icon.
     * Buttons can also include font icon and sprite image.
     *
     * @default ""
     */
    iconCss?: string;

    /**
     * Specifies a value that indicates whether the Button is `disabled` or not.
     *
     * @default false.
     */
    disabled?: boolean;

    /**
     * Allows the appearance of the Button to be enhanced and visually appealing when set to `true`.
     *
     * @default false
     */
    isPrimary?: boolean;

    /**
     * Defines class/multiple classes separated by a space in the Button element. The Button types, styles, and
     * size can be defined by using
     * [`this`](https://ej2.syncfusion.com/documentation/button/how-to/create-a-block-button).
     * {% codeBlock src='button/cssClass/index.md' %}{% endcodeBlock %}
     *
     * @default ""
     */
    cssClass?: string;

    /**
     * Defines the text `content` of the Button element.
     * {% codeBlock src='button/content/index.md' %}{% endcodeBlock %}
     *
     * @default ""
     */
    content?: string;

    /**
     * Makes the Button toggle, when set to `true`. When you click it, the state changes from normal to active.
     *
     * @default false
     */
    isToggle?: boolean;

    /**
     * Enables hold-to-repeat behavior on the Button when set to `true`.
     * While the button is held down (pointer or keyboard), repeated `clicked` events are fired
     * at the rate controlled by `repeatDelay` and `repeatInterval`.
     *
     * @default false
     */
    enableRepeat?: boolean;

    /**
     * Specifies the delay in milliseconds before repeat firing begins after the initial press.
     * Only applicable when `enableRepeat` is `true`.
     * Changes to this property take effect on the next hold cycle.
     *
     * @default 400
     */
    repeatDelay?: number;

    /**
     * Specifies the interval in milliseconds between repeated `clicked` fires during a hold.
     * When set to `0` (default), pointer repeat uses 100ms; keyboard repeat defers to the native OS rate.
     * Changes to this property take effect on the next hold cycle.
     *
     * @default 0
     */
    repeatInterval?: number;

    /**
     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
     *
     * @private
     */
    locale?: string;

    /**
     * Specifies whether to enable the rendering of untrusted HTML values in the Button component.
     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
     *
     * @default true
     */
    enableHtmlSanitizer?: boolean;

    /**
     * Triggers once the component rendering is completed.
     *
     * @event created
     */
    created?: EmitType<Event>;

    /**
     * Triggers on every click fire — both the initial press and each repeat while the button is held.
     * The event argument carries `originalEvent` (the originating DOM event) and `isRepeat`
     * (`false` for the first press, `true` for subsequent repeat fires).
     * Only emitted when `enableRepeat` is `true`.
     *
     * @event clicked
     */
    clicked?: EmitType<ClickedEventArgs>;

}