import React, { FC, ReactNode } from "react"

import { cn } from "../../design-lib/utils"
import { Spacing } from "../../design-types/design"

interface ContainerProps {
  children: ReactNode
  row?: boolean
  gap?: number | string
  margin?: number | string
  flex?: number | string
  direction?: Array<"row" | "col" | "row-reverse" | "col-reverse">
  as?: keyof JSX.IntrinsicElements
  debug?: boolean
  className?: string
  p?: Spacing
  px?: Spacing
  py?: Spacing
  pt?: Spacing
  pr?: Spacing
  pb?: Spacing
  pl?: Spacing
  position?: "static" | "relative" | "absolute" | "fixed" | "sticky"
  inset?: "auto" | "0" | "1/2" | "full"
  top?: "auto" | "0" | "1/2" | "full"
  right?: "auto" | "0" | "1/2" | "full"
  bottom?: "auto" | "0" | "1/2" | "full"
  left?: "auto" | "0" | "1/2" | "full"
  width?: string
  height?: string
  shrink?: "0" | "1"
  grow?: "0" | "1"
  display?: "flex" | "block" | "inline-block" | "inline-flex"
}

const Container: FC<ContainerProps> = ({
  children,
  row,
  gap,
  margin,
  flex,
  as,
  debug,
  className,
  p,
  px,
  py,
  pt,
  pr,
  pb,
  pl,
  position,
  inset,
  top,
  right,
  bottom,
  left,
  width,
  height,
  shrink,
  grow,
  display,
}) => {
  const containerClasses = cn("flex w-full p-4", {
    "flex-row": row,
    "flex-col": !row,
    [`gap-${gap}`]: gap,
    [`flex-${flex}`]: flex,
    [`m-${margin}`]: margin,
    "bg-cyan-lighter": debug,
    [`p-${p}`]: p,
    [`px-${px}`]: px,
    [`py-${py}`]: py,
    [`pt-${pt}`]: pt,
    [`pr-${pr}`]: pr,
    [`pb-${pb}`]: pb,
    [`pl-${pl}`]: pl,
    [`position-${position}`]: position,
    [`inset-${inset}`]: inset,
    [`top-${top}`]: top,
    [`right-${right}`]: right,
    [`bottom-${bottom}`]: bottom,
    [`left-${left}`]: left,
    [`w-${width}`]: width,
    [`h-${height}`]: height,
    [`shrink-[${shrink}]`]: shrink,
    [`grow-${grow}`]: grow,
    [`display-${display}`]: display,
  })

  const ContainerAs = as || "div"

  return (
    <ContainerAs
      className={cn(
        "flex shrink-0 flex-col items-center",
        containerClasses,
        className
      )}
    >
      {children}
    </ContainerAs>
  )
}

export default Container