/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/core'
import * as React from 'react'

import { BoxProps } from '../Box'
import { useThemeProps } from '../system'
import splitStyles from '../system/split-styles'
import { MediaQueries, Variants } from '../index'
import { useVariant } from '../VariantProvider'

const textPlugin = {
  styleProps: ['italic', 'truncate', 'size', 'underline', 'weight', 'wrap'],
  getStyles({
    align,
    italic,
    truncate,
    size,
    underline,
    weight,
    wrap = true,
    ...styles
  }) {
    if (align) {
      styles.textAlign = align
    }

    if (italic) {
      styles.fontStyle = 'italic'
    }

    if (truncate) {
      if (styles.display !== 'block' || styles.display !== 'flex') {
        styles.display = 'block'
      }
      styles.overflow = 'hidden'
      styles.textOverflow = 'ellipsis'
    }

    if (truncate || wrap === false) {
      styles.whiteSpace = 'nowrap'
    }

    if (underline) {
      styles.textDecoration = underline
    }

    if (typeof size !== 'undefined') {
      styles.fontSize = size
    }

    if (weight) {
      styles.fontWeight = weight
    }

    return styles
  },
}

export type TextProps = {
  /**
   * Gain access to the internal ref
   */
  innerRef?: Function | Object
  /**
   * If `true`, sets `display: inline-block`, otherwise it defaults to `display: block`
   */
  inline?: boolean
  /**
   * Maps to CSS `textAlign` property
   */
  align?: 'left' | 'center' | 'right'
  /**
   * Sets `fontStyle: italic`
   */
  italic?: boolean
  /**
   * Sets `whiteSpace: nowrap`, `overflow: hidden`, `textOverflow: ellipsis`
   */
  truncate?: boolean
  /**
   * Maps to CSS `fontSize` property. Accepts an index to `fontSizes` theme when using a numeric value, sets a pixel value if a no theme value found.
   */
  size?: number | string
  /**
   * Maps to CSS `textDecoration` property
   */
  underline?: string
  /**
   * Maps to CSS `fontWeight` property
   */
  weight?: number | string
  /**
   * Sets `whiteSpace: nowrap` when `false`
   */
  wrap?: boolean
} & BoxProps

type Props = React.RefAttributes<any> &
  React.HTMLAttributes<any> &
  TextProps &
  MediaQueries<TextProps> &
  Variants<TextProps>

const defaultElement = 'p'

export function Text({ as, innerRef, ...props }: Props) {
  const { inline, ...restProps } = useThemeProps('text', props)
  const Element: React.ElementType = as || (inline ? 'p' : defaultElement)
  const variant = useVariant()
  return (
    <Element
      ref={innerRef}
      {...splitStyles({
        display: inline ? 'inline-block' : 'block',
        lineHeight: '20px',
        shrink: 1,
        plugin: textPlugin,
        variant,
        ...restProps,
      })}
    />
  )
}