import { ReactElement } from 'react';
import { Props } from '../../@types/Props.js';
import { ThemeButton } from '../theme.js';

type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'subdued';
type IconSide = 'left' | 'right';
type Size = 'default' | 'small' | 'xsmall';
interface SharedButtonProps extends Props {
    /**
     * Informs users of how important an action is
     */
    priority?: ButtonPriority;
    /**
     * Reflects the prominence of the action
     */
    size?: Size;
    /**
     * An icon that appears inside the button, alongside text
     */
    icon?: ReactElement;
    /**
     * The side of the button on which the icon appears
     */
    iconSide?: IconSide;
    /**
     * Whether to hide the text label visually. It is only appropriate to set
     * this flag if an icon is passed. The text label will still be read out by
     * screen readers.
     */
    hideLabel?: boolean;
    /**
     * When set, the icon (if visible) will move slightly to the right on hover.
     */
    nudgeIcon?: boolean;
    /**
     * When true, a loading spinner will appear to the left of the button content.
     * Any icon present will be replaced by the spinner.
     */
    isLoading?: boolean;
    /**
     * Adds the ability to provide a custom loading announcement for users who use a
     * screen reader. Defaults to "Loading".
     */
    loadingAnnouncement?: string;
    /**
     * Partial or complete theme to override the component's colour palette.
     * The sanctioned colours have been set out by the design system team.
     * The colours which can be changed are:
     *
     *  `textPrimary`<br>
     *  `backgroundPrimary`<br>
     *  `backgroundPrimaryHover`<br>
     *  `textSecondary`<br>
     *  `backgroundSecondary`<br>
     *  `backgroundSecondaryHover`<br>
     *  `textTertiary`<br>
     *  `backgroundTertiaryHover`<br>
     *  `borderTertiary`<br>
     *  `textSubdued`<br>
     *
     *  If you do not supply `backgroundPrimaryHover`, `backgroundSecondaryHover` or `backgroundTertiaryHover`
     *  they will be calculated if there is hex code background colour.
     */
    theme?: Partial<ThemeButton>;
}

export type { ButtonPriority, IconSide, SharedButtonProps, Size };