import {FunctionComponent} from 'react';
import cls from 'classnames';
import {Transition} from '@core0/transition';
import {Icon} from '@core0/icon';
import {SnackbarType} from './snackbar-type.enum';
import cn from './snackbar.module.styl';

export interface SnackbarItemProps {
    onClose(): void;
    message: string;
    type: SnackbarType;
    duration?: number;
}

export const SnackbarItem: FunctionComponent<SnackbarItemProps> = props => {
    const {
        onClose = () => {},
        type,
        message
    } = props;

    const isSuccessType = type === SnackbarType.Success;
    const isErrorType = type === SnackbarType.Error;
    const isWarningType = type === SnackbarType.Warning;
    const isComparisonInfoType = type === SnackbarType.ComparisonInfo;

    /*
     ****************************************
     * Event Handlers
     ****************************************
     */
    function closeIconClickHandler() {
        onClose();
    }

    return (
        <Transition type="fade-in-down" enterDuration={5000000} exitDuration={5000000}>
            <div className={cls(cn.snackbarItem, {
                [cn.success]: isSuccessType,
                [cn.error]: isErrorType,
                [cn.warning]: isWarningType,
                [cn.comparisonInfo]: isComparisonInfoType})}
            >
                { isSuccessType || isComparisonInfoType
                ? <Icon type="success" className={cn.icon} />
                : null}
                { isErrorType
                ? <Icon type="error" className={cn.icon} />
                : null}
                { isWarningType
                ? <Icon type="warning" className={cn.icon} />
                : null}
                <strong className={cn.msg}>{message}</strong>
                <Icon
                    type="close"
                    className={cn.icon}
                    onClick={closeIconClickHandler}
                />
            </div>
        </Transition>
    );
};