import { css } from '@emotion/react';
import styled from '@emotion/styled';
import React from 'react';

import { ColorTokens, getColorFromToken } from '../../foundation/Colors';
import {
  getResponsiveTypographyStyleFromToken,
  TypographyTokens,
} from '../../foundation/Typography';
import { shouldNotForwardProps } from '../../utils/should-not-forward-props';

export type TypographyUIProps = {
  backgroundColorToken?: ColorTokens;
  colorToken: ColorTokens;
  typographyToken: TypographyTokens;
  whiteSpace: React.CSSProperties['whiteSpace'];
};

export const BaseTypography = styled(
  'p',
  shouldNotForwardProps([
    'whiteSpace',
    'backgroundColorToken',
    'typographyToken',
    'colorToken',
    'as',
  ]),
)<TypographyUIProps>`
  margin: 0;
  padding: 0;
  white-space: ${({ whiteSpace }) => whiteSpace};
  color: ${({ theme, colorToken }) => getColorFromToken({ colorToken, theme })};
  background: ${({ theme, backgroundColorToken }) =>
    !backgroundColorToken
      ? 'transparent'
      : getColorFromToken({ colorToken: backgroundColorToken, theme })};
  ${({ theme, typographyToken }) =>
    css(getResponsiveTypographyStyleFromToken({ theme, token: typographyToken }))};
`;

export const RainbowTypography = styled(BaseTypography)`
  display: inline-block;
  background: ${({ theme }) => theme.gradients.rainbow};
  background-clip: text;
  text-fill-color: transparent;
`;