import React from 'react';
import styled, { css } from 'styled-components';
import type { GlobalProps } from '@lendi-ui/commons/utils';
import { baseFontSize, fontSize, BreakpointMedia, LineHeight } from '../../tokens';
import { linkStyle, styleData } from './styles';
import { pxToRem } from '@lendi-ui/commons/utils';

export interface RichTextProps extends GlobalProps {
  children: React.ReactNode;
  textSize?: 'md' | 'lg';
  className?: string;
}

const StyledRichText = styled.div<RichTextProps>`
  font-size: ${pxToRem(baseFontSize)};
  line-height: ${styleData.body1.lineHeight};
  color: ${({ theme }) => theme.color.text.subtle};

  ${BreakpointMedia.sm} {
    font-size: ${({ textSize }) => textSize === 'lg' && pxToRem(fontSize[5])};
  }

  > * {
    font-family: ${({ theme }) => theme.asset.font.body.family};
    font-weight: ${({ theme }) => theme.asset.font.body.weight};
    font-size: 1em;
    margin-bottom: 0;
    margin-top: 0;
  }

  > * + * {
    margin-top: ${pxToRem(fontSize[3])};

    ${BreakpointMedia.sm} {
      margin-top: ${({ textSize }) => textSize === 'lg' && pxToRem(fontSize[5])};
    }
  }

  > * li {
    margin-top: 0.5em;
  }

  > * + h1,
  > * + h2,
  > * + div,
  > div + * {
    margin-top: ${pxToRem(fontSize[10])};
  }

  > h1 + *,
  > h2 + * {
    margin-top: ${pxToRem(fontSize[6])};
  }

  > h3 + *,
  > h4 + * {
    margin-top: ${pxToRem(fontSize[5])};
  }

  > * + h3,
  > * + h4 {
    margin-top: ${pxToRem(fontSize[9])};
  }

  > h1,
  > h2,
  > h3,
  > h4 {
    font-family: ${({ theme }) => theme.asset.font.body.family};
    line-height: ${LineHeight.heading};
    font-weight: ${({ theme }) => theme.asset.font.heading.weight};
    color: ${({ theme }) => theme.color.text.main};
  }

  > h1 {
    font-size: ${styleData.display2.fontSize.mobile};

    ${'desktop' in styleData.display2.fontSize &&
    css`
      ${BreakpointMedia.sm} {
        font-size: ${styleData.display2.fontSize.desktop};
      }
    `};
  }

  > h2 {
    font-size: ${styleData.title1.fontSize.mobile};

    ${'desktop' in styleData.title1.fontSize &&
    css`
      ${BreakpointMedia.sm} {
        font-size: ${styleData.title1.fontSize.desktop};
      }
    `};
  }

  > h3 {
    font-size: ${styleData.title2.fontSize.mobile};
  }

  > h4 {
    font-size: ${styleData.title3.fontSize.mobile};
  }

  > a,
  li > a,
  p > a {
    ${({ theme }) => linkStyle(theme)};
  }
`;

// Direct children have margin removed and are spaced out xs
export const RichText = ({ children, textSize = 'md', ...props }: RichTextProps) => (
  <StyledRichText textSize={textSize} {...props}>
    {children}
  </StyledRichText>
);