import TooltipMUI, {tooltipClasses} from '@mui/material/Tooltip';
import {styled} from '@mui/material/styles';
import {TypographyComponent as Typography} from '../../atoms';
import {ITooltip} from './tooltip.type';
import React from 'react';

const Tooltip = styled(
    ({className, backgroundColor, shadow, ...props}: ITooltip) => (
        <TooltipMUI {...props} arrow classes={{popper: className}} />
    ),
)(({theme, backgroundColor, shadow}) => ({
    [`& .${tooltipClasses.arrow}`]: {
        color: backgroundColor || theme.palette.gray[900],
        overflow: 'visible',
        ['::before']: {
            borderRadius: 2,
            width: 13,
            height: 13,
        },
        boxShadow:
            shadow &&
            `0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)`,
    },
    [`& .${tooltipClasses.tooltip}`]: {
        backgroundColor: backgroundColor || theme.palette.gray[900],
        borderRadius: 8,
        padding: '8px 12px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        boxShadow:
            shadow &&
            `0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)`,
    },
}));

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

const Title = styled(Typography)`
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
    color: ${({theme}) => theme.palette.white};
    font-family: inherit;
    word-break: break-word;
`;

const Description = styled(Typography)`
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    color: ${({theme}) => theme.palette.white};
    font-family: inherit;
    word-break: break-word;
`;

const Container = styled('div')`
    display: inline-flex;
`;

export const TooltipStyle = {
    Tooltip,
    Title,
    Description,
    Content,
    Container,
};