import { TailwindSize } from "../types"
import "hono/jsx"
import { FC, PropsWithChildren } from "hono/jsx"

export const VStack: FC<VStackProps> = (props) => {
  return (
    <Stack
      direction="col"
      mainAxis={props.v}
      crossAxis={props.h}
      wrap={props.wrap}
      gap={props.gap}
      class={props.class}
    >
      {props.children}
    </Stack>
  )
}

export const HStack: FC<HStackProps> = (props) => {
  return (
    <Stack
      direction="row"
      mainAxis={props.h}
      crossAxis={props.v}
      wrap={props.wrap}
      gap={props.gap}
      class={props.class}
    >
      {props.children}
    </Stack>
  )
}

const Stack: FC<StackProps> = (props) => {
  const classes = [
    "flex",
    `flex-${props.direction}`,
    props.wrap ? "flex-wrap" : "",
    props.gap ? `gap-${props.gap}` : "",
    props.mainAxis ? `justify-${props.mainAxis}` : "",
    props.crossAxis ? `items-${props.crossAxis}` : "",
    props.class ?? "",
  ]
    .filter(Boolean)
    .join(" ")

  return <div class={classes}>{props.children}</div>
}

export const Test = () => {
  const mainAxisOpts: MainAxisOpts[] = ["start", "center", "end", "between", "around", "evenly"]
  const crossAxisOpts: CrossAxisOpts[] = ["start", "center", "end", "stretch", "baseline"]

  return (
    <div class="p-4 space-y-8">
      {/* HStack layout matrix */}
      <div>
        <h2 class="text-lg font-bold mb-2">HStack Layout</h2>
        <div class="overflow-auto">
          <div class="grid grid-cols-7 gap-1">
            {/* Header row: blank + h labels */}
            <div></div>
            {mainAxisOpts.map((h) => (
              <div key={h} class="text-sm font-medium text-center">
                h: {h}
              </div>
            ))}

            {/* Each row: v label + HStack cells */}
            {crossAxisOpts.map((v) => [
              <div key={v} class="text-sm font-medium">
                v: {v}
              </div>,
              ...mainAxisOpts.map((h) => (
                <HStack key={`${h}-${v}`} h={h} v={v} class="bg-gray-100 p-2 h-24 border border-gray-400">
                  <div class="text-center p-1 bg-red-500">Aa</div>
                  <div class="text-center p-1 bg-green-500">Aa</div>
                  <div class="text-center p-1 bg-blue-500">Aa</div>
                </HStack>
              )),
            ])}
          </div>
        </div>
      </div>

      {/* VStack layout matrix */}
      <div>
        <h2 class="text-lg font-bold mb-2">VStack Layout</h2>
        <div class="overflow-auto">
          <div class="grid grid-cols-6 gap-1">
            {/* Header row: blank + h labels */}
            <div></div>
            {crossAxisOpts.map((h) => (
              <div key={h} class="text-sm font-medium text-center">
                h: {h}
              </div>
            ))}

            {/* Each row: v label + VStack cells */}
            {mainAxisOpts.map((v) => [
              <div key={v} class="text-sm font-medium">
                v: {v}
              </div>,
              ...crossAxisOpts.map((h) => (
                <VStack key={`${h}-${v}`} v={v} h={h} class="bg-gray-100 p-2 h-42 border border-gray-400">
                  <div class="text-center p-1 bg-red-500">Aa</div>
                  <div class="text-center p-1 bg-green-500">Aa</div>
                  <div class="text-center p-1 bg-blue-500">Aa</div>
                </VStack>
              )),
            ])}
          </div>
        </div>
      </div>
    </div>
  )
}

type StackDirection = "row" | "col"

type StackProps = {
  direction: StackDirection
  mainAxis?: string
  crossAxis?: string
  wrap?: boolean
  gap?: TailwindSize
  class?: string
  children?: any
}

type MainAxisOpts = "start" | "center" | "end" | "between" | "around" | "evenly"
type CrossAxisOpts = "start" | "center" | "end" | "stretch" | "baseline"

type CommonStackProps = PropsWithChildren & {
  wrap?: boolean
  gap?: TailwindSize
  class?: string
}

type VStackProps = CommonStackProps & {
  v?: MainAxisOpts // main axis for vertical stack
  h?: CrossAxisOpts // cross axis for vertical stack
}

type HStackProps = CommonStackProps & {
  h?: MainAxisOpts // main axis for horizontal stack
  v?: CrossAxisOpts // cross axis for horizontal stack
}

// Tailwind will purge any unused styles. Since we use dynamic class names, we need to safelist the classes we use in this file.
const _tailwindSafelist = [
  "flex-row",
  "flex-col",
  "flex-wrap",
  "gap-0",
  "gap-1",
  "gap-2",
  "gap-3",
  "gap-4",
  "gap-5",
  "gap-6",
  "gap-8",
  "gap-10",
  "gap-12",
  "items-start",
  "items-center",
  "items-end",
  "items-stretch",
  "items-baseline",
  "justify-start",
  "justify-center",
  "justify-end",
  "justify-between",
  "justify-around",
  "justify-evenly",
]
