/** @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 { useVariant } from '../VariantProvider'

function getTemplateValue(value) {
  return value
    ? value.constructor === Array
      ? value.map((v) => (typeof v === 'number' ? `${v * 8}px` : v)).join(' ')
      : value
    : undefined
}

const gridViewPlugin = {
  styleProps: [
    'autoFlow',
    'autoColumns',
    'autoRows',
    'columns',
    'rows',
    'alignment',
    'distribution',
    'columnSpacing',
    'rowSpacing',
    'spacing',
  ],
  getStyles({
    autoFlow,
    autoColumns,
    autoRows,
    columns,
    rows,
    alignment,
    distribution,
    columnSpacing,
    rowSpacing,
    spacing,
    ...styles
  }) {
    if (autoFlow !== undefined && styles.gridAutoFlow === undefined) {
      styles.gridAutoFlow = autoFlow
    }
    if (autoColumns !== undefined && styles.gridAutoColumns === undefined) {
      styles.gridAutoColumns = autoColumns
    }
    if (autoRows !== undefined && styles.autoRows === undefined) {
      styles.gridAutoRows = autoRows
    }
    if (columns !== undefined && styles.gridTemplateColumns === undefined) {
      styles.gridTemplateColumns = getTemplateValue(columns)
    }
    if (rows !== undefined && styles.gridTemplateRows === undefined) {
      styles.gridTemplateRows = getTemplateValue(rows)
    }
    if (alignment !== undefined && styles.alignItems === undefined) {
      styles.alignItems = alignment
    }
    if (distribution !== undefined && styles.distribution === undefined) {
      styles.justifyItems = distribution
    }
    if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
      styles.gridColumnGap = columnSpacing * 8
    }
    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
      styles.gridRowGap = rowSpacing * 8
    }
    if (spacing !== undefined && styles.gridGap === undefined) {
      styles.gridGap = spacing * 8
    }
    return styles
  },
}

export type GridViewProps = {
  /** The algorithm used to implicitly place grid items. Maps to CSS [gridAutoFlow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) property. */
  autoFlow?: 'column' | 'row' | 'dense'

  /** The size of implicit grid columns. Maps to CSS [gridAutoColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) property. */
  autoColumns?: string

  /** The size of implicit grid rows. Maps to CSS [gridAutoRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) property. */
  autoRows?: string

  /** The columns of the grid. Maps to CSS [gridTemplateColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) property. */
  columns?: Array<any> | string

  /** The rows of the grid. Maps to CSS [gridTemplateRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) property. */
  rows?: Array<any> | string

  /** Aligns content in a grid item along the column axis. Maps to CSS [alignItems](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property. */
  alignment?: 'start' | 'end' | 'center' | 'stretch'

  /** The amount of space between children. Maps to CSS [gridGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) property. */
  spacing?: number

  /** The amount of space between columns. Maps to CSS [gridColumnGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap) property. */
  columnSpacing?: number

  /** The amount of space between rows. Maps to CSS [gridRowGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap) property. */
  rowSpacing?: number
} & BoxProps

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

const defaultElement = 'div'

export function GridView({ as, inline, innerRef, ...props }: Props) {
  const Element: React.ElementType = as || defaultElement
  const variant = useVariant()
  return (
    <Element
      ref={innerRef}
      {...splitStyles({
        display: inline ? 'inline-grid' : 'grid',
        autoColumns: 'minmax(0, auto)',
        plugin: gridViewPlugin,
        variant,
        ...props,
      })}
    />
  )
}