import {css, styled} from '@mui/material/styles';
import {IAlertContent, IAlertSurface} from './alert.type';
import {ButtonComponent, TypographyComponent as Typography} from '../../atoms';
import {themeDetector} from '../../../../helpers/theme-detector/theme-detector';

const Surface = styled('div')<IAlertSurface>`
    padding: 1rem;
    background-color: ${({theme, color}) => theme.palette[color][25]};
    border: 1px solid ${({theme, color}) => theme.palette[color][300]};
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    & .title {
        color: ${({theme, color}) =>
            theme.palette[themeDetector(false, color)][700]};
    }

    & .description {
        color: ${({theme, color}) =>
            theme.palette[themeDetector(false, color)][600]};
    }

    & .primaryButton {
        color: ${({theme, color}) =>
            theme.palette[themeDetector(false, color)][600]};
    }

    & .secondaryButton {
        color: ${({theme, color}) =>
            theme.palette[themeDetector(false, color)][700]};
    }
`;

const Content = styled('div')<IAlertContent>`
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    ${({hasIcon}) =>
        hasIcon &&
        css`
            width: calc(100% - 32px);
        `}
`;

const Title = styled(Typography)`
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
`;

const Description = styled(Typography)`
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
`;

const ButtonGroup = styled('div')`
    margin-top: 12px;
    display: flex;
    gap: 12px;
`;

const PrimaryButton = styled(ButtonComponent)``;

const SecondaryButton = styled(ButtonComponent)``;

const DismissButtonWrapper = styled('div')``;

export const AlertStyle = {
    Surface,
    Content,
    Title,
    Description,
    ButtonGroup,
    PrimaryButton,
    SecondaryButton,
    DismissButtonWrapper,
};