import type { FC } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { LoadingSpinner } from '../loadingSpinner';
import type { ComponentBaseProps } from '../../types';

export const CLASS_NAME = 'Status';

export interface StatusProps extends ComponentBaseProps {
    style?: React.CSSProperties;

    /**
     * If should shown a inner-colour circle
     */
    filled?: boolean;

    /**
     * Will define the color of the circle
     */
    variant: 'error' | 'warning' | 'success' | 'info' | 'revision' | 'neutral' | 'loading';

    /**
     * Sets the layout direction of the copy. `table` is vertical.
     * @default inline
     **/
    layoutVariant?: 'inline' | 'table';

    /**
     * The text of the status
     */
    text: string;

    /**
     * The size of the status element
     * @default medium
     */
    size?: 'small' | 'medium';

    /**
     * Subtext next to or below the status text.
     */
    children?: React.ReactNode;
}

/**
 * The status component shows the status of an object or a workflow, to provide users with contextual information.
 *
 * @type atom
 * @status live
 * @tags feedback
 */
export const Status: FC<StatusProps> = ({
    className,
    style,
    testId = CLASS_NAME,
    filled,
    variant,
    text,
    size = 'medium',
    layoutVariant = 'inline',
    children,
}) => {
    return (
        <div
            className={cx(CLASS_NAME, className, `variant-${variant}`, `size-${size}`, {
                filled,
            })}
            style={style}
            data-testid={testId}
        >
            {variant === 'loading' ? (
                <LoadingSpinner show size={size === 'small' ? 12 : 16} />
            ) : (
                <GlyphIcon name={filled ? 'dot' : 'circle'} size={size === 'small' ? 12 : 16} />
            )}
            <div className={cx(`${CLASS_NAME}-body`, `${CLASS_NAME}-${layoutVariant}`)}>
                <span className={`${CLASS_NAME}-text`}>{text}</span>
                {children && <div className={`${CLASS_NAME}-subtext`}>{children}</div>}
            </div>
        </div>
    );
};