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

type GridProps = PropsWithChildren & {
  cols?: GridCols
  gap?: TailwindSize
  v?: keyof typeof alignItemsClasses
  h?: keyof typeof justifyItemsClasses
  class?: string
}

type GridCols = number | { sm?: number; md?: number; lg?: number; xl?: number }

export const Grid: FC<GridProps> = (props) => {
  const { cols = 2, gap = 4, v, h, class: className, children } = props
  const classes = [
    "grid",
    getColumnsClass(cols),
    gap && `gap-${gap}`,
    v && alignItemsClasses[v],
    h && justifyItemsClasses[h],
    className,
  ]
  return <div class={classes.join(" ")}>{children}</div>
}

function getColumnsClass(cols: GridCols): string {
  if (typeof cols === "number") {
    return `grid-cols-${cols}`
  }

  const classes = []
  if (cols.sm) classes.push(`grid-cols-${cols.sm}`)
  if (cols.md) classes.push(`md:grid-cols-${cols.md}`)
  if (cols.lg) classes.push(`lg:grid-cols-${cols.lg}`)
  if (cols.xl) classes.push(`xl:grid-cols-${cols.xl}`)

  return classes.length ? classes.join(" ") : "grid-cols-1"
}

const alignItemsClasses = {
  start: "items-start",
  center: "items-center",
  end: "items-end",
  stretch: "items-stretch",
} as const

const justifyItemsClasses = {
  start: "justify-items-start",
  center: "justify-items-center",
  end: "justify-items-end",
  stretch: "justify-items-stretch",
} as const

export const Test = () => {
  return (
    <div class="p-4 space-y-8">
      <div>
        <h2 class="text-lg font-bold mb-4">Grid Examples</h2>

        {/* Simple 3-column grid */}
        <div class="mb-6">
          <h3 class="text-md font-semibold mb-2">Simple 3 columns: cols=3</h3>
          <Grid cols={3} gap={4}>
            <div class="bg-red-200 p-4 text-center">Item 1</div>
            <div class="bg-green-200 p-4 text-center">Item 2</div>
            <div class="bg-blue-200 p-4 text-center">Item 3</div>
            <div class="bg-yellow-200 p-4 text-center">Item 4</div>
            <div class="bg-purple-200 p-4 text-center">Item 5</div>
            <div class="bg-pink-200 p-4 text-center">Item 6</div>
          </Grid>
        </div>

        {/* Responsive grid */}
        <div class="mb-6">
          <h3 class="text-md font-semibold mb-2">Responsive: cols=&#123;sm: 1, md: 2, lg: 3&#125;</h3>
          <Grid cols={{ sm: 1, md: 2, lg: 3 }} gap={4}>
            <div class="bg-red-200 p-4 text-center">Card 1</div>
            <div class="bg-green-200 p-4 text-center">Card 2</div>
            <div class="bg-blue-200 p-4 text-center">Card 3</div>
            <div class="bg-yellow-200 p-4 text-center">Card 4</div>
          </Grid>
        </div>

        {/* More responsive examples */}
        <div class="mb-6">
          <h3 class="text-md font-semibold mb-2">More responsive: cols=&#123;sm: 2, lg: 4, xl: 6&#125;</h3>
          <Grid cols={{ sm: 2, lg: 4, xl: 6 }} gap={4}>
            <div class="bg-red-200 p-4 text-center">Item A</div>
            <div class="bg-green-200 p-4 text-center">Item B</div>
            <div class="bg-blue-200 p-4 text-center">Item C</div>
            <div class="bg-yellow-200 p-4 text-center">Item D</div>
            <div class="bg-purple-200 p-4 text-center">Item E</div>
            <div class="bg-pink-200 p-4 text-center">Item F</div>
          </Grid>
        </div>

        {/* Payment method example */}
        <div class="mb-6">
          <h3 class="text-md font-semibold mb-2">Payment buttons example</h3>
          <Grid cols={3} gap={4}>
            <button class="h-20 border-2 border-gray-300 rounded p-2 flex flex-col items-center justify-center hover:border-blue-500">
              <div class="text-2xl">💳</div>
              <span class="text-xs">Card</span>
            </button>
            <button class="h-20 border-2 border-gray-300 rounded p-2 flex flex-col items-center justify-center hover:border-blue-500">
              <div class="text-2xl">🍎</div>
              <span class="text-xs">Apple</span>
            </button>
            <button class="h-20 border-2 border-gray-300 rounded p-2 flex flex-col items-center justify-center hover:border-blue-500">
              <div class="text-2xl">💰</div>
              <span class="text-xs">PayPal</span>
            </button>
          </Grid>
        </div>

        {/* Alignment examples */}
        <div class="mb-6">
          <h3 class="text-md font-semibold mb-2">Alignment: v="center" h="center"</h3>
          <Grid cols={3} gap={4} v="center" h="center" class="h-32 bg-gray-100">
            <div class="bg-red-200 p-2">Item 1</div>
            <div class="bg-green-200 p-2">Item 2</div>
            <div class="bg-blue-200 p-2">Item 3</div>
          </Grid>
        </div>

        <div class="mb-6">
          <h3 class="text-md font-semibold mb-2">Alignment: v="start" h="end"</h3>
          <Grid cols={2} gap={4} v="start" h="end" class="h-24 bg-gray-100">
            <div class="bg-purple-200 p-2">Left</div>
            <div class="bg-orange-200 p-2">Right</div>
          </Grid>
        </div>
      </div>
    </div>
  )
}

// Tailwind safelist for dynamic classes
const _tailwindSafelist = [
  "grid",
  "grid-cols-1",
  "grid-cols-2",
  "grid-cols-3",
  "grid-cols-4",
  "grid-cols-5",
  "grid-cols-6",
  "sm:grid-cols-1",
  "sm:grid-cols-2",
  "sm:grid-cols-3",
  "sm:grid-cols-4",
  "md:grid-cols-1",
  "md:grid-cols-2",
  "md:grid-cols-3",
  "md:grid-cols-4",
  "lg:grid-cols-1",
  "lg:grid-cols-2",
  "lg:grid-cols-3",
  "lg:grid-cols-4",
  "lg:grid-cols-5",
  "lg:grid-cols-6",
  "xl:grid-cols-1",
  "xl:grid-cols-2",
  "xl:grid-cols-3",
  "xl:grid-cols-4",
  "xl:grid-cols-5",
  "xl:grid-cols-6",
  "gap-0",
  "gap-1",
  "gap-2",
  "gap-3",
  "gap-4",
  "gap-5",
  "gap-6",
  "gap-8",
  "items-start",
  "items-center",
  "items-end",
  "items-stretch",
  "justify-items-start",
  "justify-items-center",
  "justify-items-end",
  "justify-items-stretch",
]
