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

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

interface StackProps {
  as?: keyof JSX.IntrinsicElements
  children: ReactNode
  row?: boolean // True for 'row', false for 'column'
  alignCenter?: boolean // True for 'center', false for 'start'
  justifyCenter?: boolean // True for 'center', false for 'start'
  flex?: string | number
  gap?: number | string
  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?: "flex" | "block" | "inline-block" | "inline-flex"
  "data-testid"?: string
}

const Stack: React.FC<StackProps> = ({
  as = "div",
  children,
  row = false,
  alignCenter = false,
  justifyCenter = false,
  flex,
  gap,
  debug = false,
  className,
  style,
  role,
  p,
  px,
  py,
  pt,
  pr,
  pb,
  pl,
  position,
  inset,
  top,
  right,
  bottom,
  left,
  width,
  height,
  shrink,
  grow,
  display,
  "data-testid": dataTestId,
  ...props
}) => {
  const stackClass = cn(
    "flex",
    {
      "flex-row": row,
      "flex-col": !row,
      "items-center": alignCenter,
      "items-start": !alignCenter,
      "justify-center": justifyCenter,
      "justify-start": !justifyCenter,
      [`flex-${flex}`]: flex,
      [`space-x-${gap}`]: gap && row,
      [`space-y-${gap}`]: gap && !row,
      "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,
    },
    className
  )

  const StackAs = as

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

export default Stack