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

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

const BASELINE = 'baseline'
const CENTER = 'center'
const END = 'end'
const FILL = 'fill'
const HORIZONTAL = 'horizontal'
const SPACE_EVENLY = 'space-evenly'
const SPACE_BETWEEN = 'space-between'
const START = 'start'
const STRETCH = 'stretch'
const VERTICAL = 'vertical'

const stackViewPlugin = {
  styleProps: ['alignment', 'axis', 'distribution', 'spacing'],
  getStyles({ inline, alignment, axis, distribution, spacing, ...styles }) {
    if (axis && styles.flexDirection === undefined) {
      styles.flexDirection = axis === HORIZONTAL ? 'row' : 'column'
    }
    if (alignment && styles.alignItems === undefined) {
      styles.alignItems = alignment
    }
    if (distribution === FILL) {
      styles['& > *'] = { flex: '1 0 0px' }
    } else if (styles.justifyContent === undefined) {
      styles.justifyContent = distribution
    }
    if (typeof spacing === 'number') {
      styles['& > *:not(:last-child)'] = {
        [`margin${axis === HORIZONTAL ? 'Right' : 'Bottom'}`]: spacing * 8,
        [`margin${axis === HORIZONTAL ? 'Bottom' : 'Right'}`]: 0,
      }
    }
    return styles
  },
}

export type StackViewProps = {
  /** The axis along which children are laid out. */
  axis?: 'horizontal' | 'vertical'

  /** The alignment of children perpendicular to the stack view’s main axis. */
  alignment?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'

  /** The distribution of children along the main axis. */
  distribution?:
    | 'start'
    | 'center'
    | 'end'
    | 'fill'
    | 'space-between'
    | 'space-evenly'

  /** The amount of space or element that is inserted between each child. */
  spacing?: number | string | React.ReactNode
} & BoxProps

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

const defaultElement = 'div'

export function StackView({ as, children, inline, innerRef, ...props }: Props) {
  const Element: React.ElementType = as || defaultElement
  const variant = useVariant()
  const childrenToRender =
    Element === 'textarea'
      ? undefined
      : typeof props.spacing === 'number' || props.spacing === undefined
      ? children
      : joinChildren(children, props.spacing)
  return (
    <Element
      ref={innerRef}
      {...splitStyles({
        display: inline ? 'inline-flex' : 'flex',
        axis: VERTICAL,
        plugin: stackViewPlugin,
        variant,
        ...props,
      })}
    >
      {childrenToRender}
    </Element>
  )
}

StackView.BASELINE = BASELINE
StackView.CENTER = CENTER
StackView.END = END
StackView.FILL = FILL
StackView.HORIZONTAL = HORIZONTAL
StackView.SPACE_BETWEEN = SPACE_BETWEEN
StackView.SPACE_EVENLY = SPACE_EVENLY
StackView.START = START
StackView.STRETCH = STRETCH
StackView.VERTICAL = VERTICAL