import React, { FC } from 'react';
import styled from 'styled-components';
import {
  color,
  ColorProps,
  fontFamily,
  FontFamilyProps,
  fontWeight,
  FontWeightProps,
  lineHeight,
  LineHeightProps,
  fontSize,
  FontSizeProps,
  letterSpacing,
  LetterSpacingProps,
  variant
} from 'styled-system';
import { Box } from '../Box';

type BoxProps = React.ComponentProps<typeof Box>;

const textStyle = variant({
  key: 'texts'
});

export type Props = {
  variant: 'b1m' | 'b1' | 'b2m' | 'b2' | 'b3m' | 'b3' | 'sh1' | 'c2';
} & {
  bold?: boolean;
} & BoxProps &
  ColorProps &
  FontFamilyProps &
  FontWeightProps &
  FontSizeProps &
  LineHeightProps &
  LetterSpacingProps;

export const TextComponent = styled(Box)<Props>(
  textStyle,
  color,
  fontFamily,
  fontWeight,
  lineHeight,
  fontSize,
  letterSpacing,
  props => ({
    ...(props.bold && fontWeight({ ...props, fontWeight: 'bold' })),
    overflowWrap: 'break-word'
  })
);

TextComponent.defaultProps = {
  as: 'span',
  variant: 'b1'
  // fontSize: 'baseText',
  // lineHeight: 'normal',
};

export const Text = Object.assign(TextComponent, {
  defaultProps: TextComponent.defaultProps
});
