import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';
import { Popover } from '../popover';
import { SuiteBadge, renderBadgeIcon } from '../suiteBadge';
import type { PopoverProps } from '../popover';
import type { SuiteBadgeIconCategory, SuiteBadgeVariantType } from '../suiteBadge';
import type { SuiteBadgeIndicatorType, SuiteBadgeProps } from '../suiteBadge/types';

export const CLASS_NAME = 'Pill';

export type PillProps = Omit<SuiteBadgeProps, 'type' | 'icon'> & {
    /**
     * Defines the category icon to show
     **/
    iconCategory?: SuiteBadgeIconCategory;

    /**
     * Defines the name of the icon's category to show
     **/
    iconName?: string;

    /**
     * Will show a colored exclamation sign icon at right of the text
     */
    indicator?: SuiteBadgeIndicatorType;

    /*
     * Options to pass to the popover
     */
    popoverOptions: PopoverProps;

    /**
     * Variant color of the pill
     */
    variant?: SuiteBadgeVariantType;
};

/**
 * Pills are clickable interactive elements that represent a concept or an object. Clicking on a pill toggles the display of a popver containing more information about the concept or object represented by the pill.
 *
 * @type molecule
 * @status live
 * @tags objects-attributes
 */
export const Pill: FC<PillProps> = ({
    className,
    testId = CLASS_NAME,
    iconCategory,
    iconName,
    popoverOptions,
    variant,
    ...props
}) => (
    <Popover
        contentClassName="PillPopoverContent"
        placement="bottom"
        {...popoverOptions}
        show={props.disabled ? false : undefined}
    >
        <SuiteBadge
            className={cx(CLASS_NAME, className, { [`variant-${variant}`]: variant })}
            testId={testId}
            type="pill"
            icon={iconCategory && iconName && renderBadgeIcon(iconCategory, iconName)}
            {...props}
        />
    </Popover>
);