import { CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import { CommonComponentProps } from '../../utils/types'
import './Space.scss'

export interface SpaceProps extends CommonComponentProps {
  className?: string
  style?: CSSProperties
  children?: ReactNode
  vertical?: boolean
  gap?:
    | 'small'
    | 'medium'
    | 'large'
    | number
    | (string & {})
    | [number | string, number | string]
  align?: 'start' | 'end' | 'center' | 'baseline'
  wrap?: boolean
  full?: boolean
}

const gapValueMap: {
  [p: string]: any
} = {
  small: 8,
  medium: 16,
  large: 32,
}

export function Space(props: SpaceProps) {
  const {
    className,
    style,
    children,
    vertical,
    gap = 'medium',
    align = 'normal',
    wrap,
    full,
    ...restProps
  } = props

  const spaceClass = classNames('s-space', `s-space-align-${align}`, {
    's-space-wrap': wrap,
    's-space-vertical': vertical,
    's-space-full': full,
  })

  const innerGap = gapValueMap[gap as string] ?? gap

  const spaceStyle = {
    rowGap: Array.isArray(innerGap) ? innerGap[0] : innerGap,
    columnGap: Array.isArray(innerGap) ? innerGap[1] : innerGap,
    ...style,
  }

  return (
    <div {...restProps} className={spaceClass} style={spaceStyle}>
      {children}
    </div>
  )
}

export default Space