import React, {FC, useState} from 'react';
import {
    IAlert,
    IAlertButton,
    IAlertButtonGroup,
    IAlertText,
} from './alert.type';
import {AlertStyle as S} from './alert.style';
import {alertVariantMapper as variantMapper} from './mappers/alert-variant-mapper';
import {AlertIconsComponent as AlertIcons} from './parts/icons/alert-icons.component';
import {ButtonComponent} from '../../atoms';
import XClose from 'herein-icon/x-close';

export const Alert: FC<IAlert> = ({
    variant = 'primary',
    hasIcon = true,
    children,
    hasDismiss,
}) => {
    const [isDismissed, setIsDismissed] = useState(false);

    if (isDismissed) return <></>;

    const dismiss = () => setIsDismissed(true);

    return (
        <S.Surface dir='auto' color={variantMapper[variant]}>
            {hasIcon && <AlertIcons variant={variant} />}
            <S.Content dir='auto' hasIcon={hasIcon}>
                {children}
            </S.Content>
            {hasDismiss && (
                <S.DismissButtonWrapper>
                    <ButtonComponent
                        onClick={dismiss}
                        color={variantMapper[variant]}
                        variant='link'
                        fontSize='1.1rem'
                        aspectRatio={'1/1'}
                    >
                        <XClose />
                    </ButtonComponent>
                </S.DismissButtonWrapper>
            )}
        </S.Surface>
    );
};

const Title: FC<IAlertText> = (props) => {
    return <S.Title className='title' {...props} />;
};

const Description: FC<IAlertText> = (props) => {
    return <S.Description className='description' {...props} />;
};

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

const PrimaryButton: FC<Omit<IAlertButton, 'variant' | 'color'>> = (props) => {
    return (
        <S.PrimaryButton className='primaryButton' variant='link' {...props} />
    );
};

const SecondaryButton: FC<Omit<IAlertButton, 'variant' | 'color'>> = (
    props,
) => {
    return (
        <S.SecondaryButton
            className='secondaryButton'
            variant='link'
            {...props}
        />
    );
};

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