import {styled} from '@mui/material';
import {
    ITypography,
    TypographySizesType,
    TypographyWeights,
} from './typography.type';

export const sizes: Record<TypographySizesType, string> = {
    display2XL: '4.5rem',
    displayXL: '3.75rem',
    displayLG: '3rem',
    displayMD: '2.25rem',
    displaySM: '1.875rem',
    displayXS: '1.5rem',
    textXL: '1.25rem',
    textLG: '1.125rem',
    textMD: '1rem',
    textSM: '0.875rem',
    textXS: '0.75rem',
    textXXS: '0.6rem',
};

export const weights: Record<TypographyWeights, TypographyWeights> = {
    '100': 100,
    '200': 200,
    '300': 300,
    '400': 400,
    '500': 500,
    '600': 600,
    '700': 700,
    '800': 800,
    '900': 900,
};

const letterSpacings: Record<TypographySizesType, string> = {
    display2XL: '-0.09rem',
    displayXL: '-0.075rem',
    displayLG: '-0.06rem',
    displayMD: '-0.045rem',
    displaySM: 'normal',
    displayXS: 'normal',
    textXL: 'normal',
    textLG: 'normal',
    textMD: 'normal',
    textSM: 'normal',
    textXS: 'normal',
    textXXS: 'normal',
};

const lineHeights: Record<TypographySizesType, string> = {
    display2XL: '5.625rem',
    displayXL: '4.5rem',
    displayLG: '3.75rem',
    displayMD: '2.75rem',
    displaySM: '2.375rem',
    displayXS: '2rem',
    textXL: '1.875rem',
    textLG: '1.75rem',
    textMD: '1.5rem',
    textSM: '1.25rem',
    textXS: '1.125rem',
    textXXS: '1rem',
};

const Typography = styled('span')<ITypography>`
    padding: 0;
    margin: 0;
    font-size: ${({size}) => sizes[size || 'textMD']};
    font-weight: ${({weight}) => weights[weight || 400]};
    letter-spacing: ${({size}) => letterSpacings[size || 'textMD']};
    line-height: ${({size}) => lineHeights[size || 'textMD']};
    color: ${({theme, color}) => theme.palette[color || 'gray'][900]};
    font-family: inherit;
`;

export const TypographyStyle = {
    Typography,
};