import type { FC } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { Toast as BsToast } from 'react-bootstrap';
import { GlyphButton } from '../glyphButton';
import { ANIMATION_TIME } from './types';
import type { Message } from './types';
import type { GlyphName24PX } from '@theorchard/suite-icons';

const CLASS_NAME = 'Toast';

export interface ToastProps {
    className?: string;
    message: Message;
    toastTime: number;
    onClose?: (id: string) => void;
    testId?: string;
}

const getToastGlyph = (variant: Message['variant']): GlyphName24PX => {
    switch (variant) {
        case 'success':
            return 'success';
        case 'info':
            return 'info';
        case 'warning':
            return 'warning';
        case 'error':
            return 'warning';
        default:
            return 'success';
    }
};

/**
 * Toasts are floating UI elements that notify users about the output of an asynchronous task, or a task that doesn't have any other obvious visual feedback confirmation.
 *
 * @type molecule
 * @status live
 * @tags feedback
 */
export const Toast: FC<ToastProps> = ({
    message,
    toastTime,
    className,
    onClose,
    testId = CLASS_NAME,
}) => {
    const [show, setShow] = React.useState(true);

    const handleClose = () => {
        setShow(false);

        // Remove from provider state after exit animation completes
        setTimeout(() => {
            onClose?.(message.id);
        }, ANIMATION_TIME);
    };

    const variant = message.variant || 'success';
    const classNameProp = message.classNameProp;
    const isPersistent = message.persistent || false;

    return (
        <BsToast
            onClose={handleClose}
            show={show}
            delay={toastTime}
            autohide={!isPersistent}
            className={cx(
                CLASS_NAME,
                className,
                classNameProp,
                `${CLASS_NAME}-${variant}`,
                !show ? 'Toast-end-animation' : 'Toast-begin-animation',
                variant
            )}
            data-testid={testId}
        >
            <BsToast.Body className={`${CLASS_NAME}-body`} data-testid={`Toast-${message.id}`}>
                <div className={`${CLASS_NAME}-content`}>
                    <div className={`${CLASS_NAME}-line`} />
                    <GlyphIcon
                        size={24}
                        name={getToastGlyph(variant)}
                        className={`${CLASS_NAME}-indicator`}
                    />
                    <div className={`${CLASS_NAME}-message`}>{message.content}</div>
                    <GlyphButton
                        variant="control"
                        name="close"
                        className={`${CLASS_NAME}-close`}
                        onClick={handleClose}
                    />
                </div>
            </BsToast.Body>
        </BsToast>
    );
};