import React, {FC} from 'react';

import {ToastStyle as S} from './toast.style';
import {WavyIconComponent as WavyIcon} from '../wavy-icon/wavy-icon.component';
import XClose from 'herein-icon/x-close';
import {
    IToast,
    IToastButton,
    IToastButtonGroup,
    IToastDescription,
    IToastTitle,
} from './toast.type';
import {motion} from 'framer-motion';
import {toastColorMapper as colorMapper} from './mappers/toast-color-mapper';
import {toastIconNameMapper} from './mappers/toast-icon-name-mapper';

export const Toast: FC<IToast> = ({
    isOpen,
    onClose,
    children,
    hasIcon = true,
    variant = 'info',
}) => {
    if (!isOpen) return <></>;

    return (
        <motion.div
            initial={{opacity: 1, scale: 1}}
            animate={{opacity: isOpen ? 1 : 0, scale: isOpen ? 1 : 0}}
            transition={{duration: 0.5}}
        >
            <S.Surface>
                {hasIcon && (
                    <S.IconSide>
                        <WavyIcon
                            name={toastIconNameMapper[variant]}
                            color={colorMapper[variant]}
                        />
                    </S.IconSide>
                )}
                <S.Content>{children}</S.Content>
                <S.DismissButtonSide>
                    <S.XCloseButton
                        onClick={onClose}
                        color='gray'
                        variant='link'
                    >
                        <XClose />
                    </S.XCloseButton>
                </S.DismissButtonSide>
            </S.Surface>
        </motion.div>
    );
};

const Title: FC<IToastTitle> = (props) => {
    return <S.Title {...props} />;
};

const Description: FC<IToastDescription> = (props) => {
    return <S.Description {...props} />;
};

const ButtonGroup: FC<IToastButtonGroup> = (props) => {
    return <S.ButtonGroup {...props} />;
};

const PrimaryButton: FC<IToastButton> = (props) => {
    return <S.Button variant='link' {...props} />;
};

const SecondaryButton: FC<IToastButton> = (props) => {
    return <S.Button color='gray' variant='link' {...props} />;
};

export const ToastComponent = Object.assign(Toast, {
    Title,
    Description,
    ButtonGroup,
    PrimaryButton,
    SecondaryButton,
});