/** @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 { spacingValue } from '../system'
import { MediaQueries, Variants } from '../index'
import { useVariant } from '../VariantProvider'

const tileViewPlugin = {
  styleProps: ['minCellWidth', 'spacing'],
  getStyles({ minCellWidth, spacing, ...styles }) {
    const parsedMinCellWidth = spacingValue(minCellWidth)
    if (parsedMinCellWidth) {
      styles.gridTemplateColumns = `repeat(auto-fill, minmax(${parsedMinCellWidth}, 1fr))`
    }
    if (spacing !== undefined) {
      styles.gridGap = spacingValue(spacing)
    }
    return styles
  },
}

export type TileViewProps = {
  /** The minimum width a cell must be. */
  minCellWidth?: number

  /** The amount of space between children. */
  spacing?: number
} & BoxProps

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

const defaultElement = 'div'

export function TileView({ as, innerRef, ...props }) {
  const Element: React.ElementType = as || defaultElement
  const variant = useVariant()
  return (
    <Element
      ref={innerRef}
      {...splitStyles({
        display: 'grid',
        grow: 1,
        shrink: 1,
        plugin: tileViewPlugin,
        variant,
        ...props,
      })}
    />
  )
}