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

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

interface GridProps {
  as?: keyof JSX.IntrinsicElements
  asChild?: boolean
  children: ReactNode
  debug?: boolean
  className?: string
  style?: CSSProperties
  role?: 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?: Spacing | "full" | "auto" | "max-content" | "min-content"
  height?: Spacing | "full" | "auto" | "max-content" | "min-content"
  shrink?: "0" | "1"
  grow?: "0" | "1"
  display?: "none" | "inline-grid" | "grid"
  columns?: string
  rows?: string
  flow?: "row" | "column" | "dense" | "row-dense" | "column-dense"
  align?: "start" | "center" | "end" | "baseline" | "stretch"
  justify?: "start" | "center" | "end" | "between"
  gap?: Spacing
  gapX?: Spacing
  gapY?: Spacing
  "data-testid"?: string
}

const Grid: React.FC<GridProps> = ({
  as = "div",
  asChild = false,
  children,
  debug = false,
  className,
  style,
  role,
  p,
  px,
  py,
  pt,
  pr,
  pb,
  pl,
  position,
  inset,
  top,
  right,
  bottom,
  left,
  width,
  height,
  shrink,
  grow,
  display,
  columns,
  rows,
  flow,
  align,
  justify,
  gap,
  gapX,
  gapY,
  "data-testid": dataTestId,
  ...props
}) => {
  const gridClass = cn(
    "grid",
    {
      "grid-cols-1": !asChild && !columns,
      "grid-rows-1": !asChild && !rows,
      "grid-flow-row": flow === "row",
      "grid-flow-col": flow === "column",
      "grid-flow-row-dense": flow === "dense",
      "grid-flow-col-dense": flow === "column-dense",
      [`gap-${gap}`]: gap && !asChild,
      [`grid-cols-${columns}`]: columns && !asChild,
      [`grid-rows-${rows}`]: rows && !asChild,
      [`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,
      [`grid`]: display === "grid",
      [`inline-grid`]: display === "inline-grid",
      [`display-none`]: display === "none",
      [`gap-x-${gapX}`]: gapX,
      [`gap-y-${gapY}`]: gapY,
      [`items-${align}`]: align,
      [`justify-${justify}`]: justify,
    },
    className
  )

  const GridAs = as

  return (
    <GridAs
      className={gridClass}
      style={style}
      role={role}
      data-testid={dataTestId}
      {...props}
    >
      {children}
    </GridAs>
  )
}

export default Grid