import styled from 'styled-components';
import { TypographyProps } from '../../interfaces';

export const StyledTypography = styled.div<TypographyProps>`
  ${({ variant, fontSize, lineHeight, fontWeight, letterSpacing, theme }) => {
    switch (variant) {
      case 'h1':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '500'};

          font-size: ${fontSize ? `${fontSize}px` : '48px'};
          letter-spacing: ${letterSpacing || '-0.04em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '58px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '32px'};
          	letter-spacing: ${letterSpacing || '-0.03em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '40px'};
					}
        `;
      case 'h2':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '500'};

          font-size : ${fontSize ? `${fontSize}px` : '40px'};
          letter-spacing: ${letterSpacing || '-0.03em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '48px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '28px'};
          	letter-spacing: ${letterSpacing || '-0.02em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '30px'};
					}
        `;
      case 'h3':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '500'};

          font-size : ${fontSize ? `${fontSize}px` : '32px'};
          letter-spacing: ${letterSpacing || '-0.03em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '40px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '24px'};
          	letter-spacing: ${letterSpacing || '-0.01em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '28px'};
					}
        `;
      case 'h4':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '500'};

          font-size : ${fontSize ? `${fontSize}px` : '24px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '28px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '20px'};
          	letter-spacing: ${letterSpacing || '-0.01em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '24px'};
					}
        `;
      case 'h5':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '500'};

          font-size : ${fontSize ? `${fontSize}px` : '20px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '24px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '20px'};
          	letter-spacing: ${letterSpacing || '-0.01em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '22px'};
					}
        `;
      case 'p1':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '16px'};
          letter-spacing: ${letterSpacing || '-0.02em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '24px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '16px'};
          	letter-spacing: ${letterSpacing || '-0.01em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '21px'};
					}
        `;
      case 'p2':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '14px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '21px'};
        `;
      case 'p3':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '13px'};
          letter-spacing: ${letterSpacing || '0em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '20px'};
        `;
      case 'p4':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '12px'};
          letter-spacing: ${letterSpacing || '0em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '18px'};
        `;
      case 'utility1':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '16px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '20px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '14px'};
          	letter-spacing: ${letterSpacing || '-0.01em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '18px'};
					}
        `;
      case 'utility2':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '14px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '18px'};
        `;
      case 'utility3':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '13px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '16px'};
        `;
      case 'utility4':
      case 'utility5':
        return `
					font-family: ${theme.fonts.primary}, sans-serif;
					font-weight: ${fontWeight || '400'};

          font-size : ${fontSize ? `${fontSize}px` : '12px'};
          letter-spacing: ${letterSpacing || '-0.01em'};
          line-height: ${lineHeight ? `${lineHeight}px` : '13px'};

					@media (max-width: ${theme.screens.mobile}) {
						font-size: ${fontSize ? `${fontSize}px` : '13px'};
          	letter-spacing: ${letterSpacing || '-0.01em'};
						line-height: ${lineHeight ? `${lineHeight}px` : '16px'};
					}
        `;

      default:
        return `
				font-family: ${theme.fonts.primary}, sans-serif;
				font-weight: ${fontWeight || '400'};

				font-size : ${fontSize ? `${fontSize}px` : '16px'};
				letter-spacing: ${letterSpacing || '-0.02em'};
				line-height: ${lineHeight ? `${lineHeight}px` : '24px'};

				@media (max-width: ${theme.screens.mobile}) {
					font-size: ${fontSize ? `${fontSize}px` : '16px'};
					letter-spacing: ${letterSpacing || '-0.01em'};
					line-height: ${lineHeight ? `${lineHeight}px` : '21px'};
				}
        `;
    }
  }}

  ${({ bold }) =>
    bold &&
    `
    font-weight: 700;
  `}

  margin: ${({ margin }) =>
    margin ? `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px` : 0};
  color: ${({ color, theme }) => color || theme.colors.neutral[900]};
  text-align: ${({ align }) => align || 'left'};

	${({ maxWidth }) =>
    maxWidth
      ? `
					max-width: ${maxWidth}px;
					overflow: hidden;
					text-overflow: ellipsis;
				`
      : null}
`;