"use client"
import React, { ComponentProps, ComponentPropsWithoutRef, useRef } from "react"
import { useElementAttribute } from "../../hooks"
import { classNames } from "../../utils"
import { Item } from "../Item"
import { Label } from "../Label"
import { RadioGroup, RadioGroupItemProps, RadioGroupProps } from "../RadioGroup"
import { SpaceBetween } from "../SpaceBetween"
import { Text } from "../Text"

export type RadioButtonGroupProps = RadioGroupProps

const RadioButtonGroupBase = ({
  className,
  variant = "checkmark",
  ...rest
}: RadioButtonGroupProps) => {
  return (
    <RadioGroup
      className={classNames(
        "w-full grid-flow-row gap-4 md:grid-flow-col",
        className,
      )}
      variant={variant}
      {...rest}
    />
  )
}

export type RadioButtonGroupItemProps = RadioGroupItemProps & {
  children: React.ReactNode
}

const RadioButtonGroupItemBase = ({
  children,
  className,
  disabled,
  ...rest
}: RadioButtonGroupItemProps) => {
  const ref = useRef<HTMLButtonElement>(null)
  const state = useElementAttribute<"checked" | "unchecked">(ref, "data-state")
  const checked = state === "checked"

  return (
    <Label htmlFor={rest.id}>
      <Item
        className={classNames(
          "relative size-full grow cursor-pointer justify-start gap-8 rounded bg-bg-additional-1 p-4 transition-colors md:px-6 md:pb-12 md:pt-8",
          checked && "bg-[#E8F5FF] dark:bg-[#232E3A]",
          className,
        )}
        disabled={disabled}
        variant="unstyled"
      >
        {children}

        <RadioGroup.Item
          className="absolute right-4 top-4 md:right-6 md:top-8"
          disabled={disabled}
          ref={ref}
          {...rest}
        />
      </Item>
    </Label>
  )
}

export const RadioButtonGroupItemContent = ({
  className,
  ...rest
}: ComponentProps<typeof Item.Content>) => {
  return (
    <Item.Content
      className={classNames("justify-start gap-2 md:gap-8", className)}
      {...rest}
    />
  )
}

const RadioButtonGroupItemTitle = ({
  className,
  size = "sm",
  ...rest
}: Partial<ComponentPropsWithoutRef<typeof Text.Display>>) => {
  return (
    <SpaceBetween className="gap-3">
      <Text.Body
        className={classNames("inline md:hidden", className)}
        size="md"
        weight="semibold"
        {...rest}
      />
      <Text.Display
        className={classNames("hidden md:inline", className)}
        size={size}
        {...rest}
      />
      {/* Empty space to account for the radio button */}
      <div className="size-6 md:size-7" />
    </SpaceBetween>
  )
}

export const RadioButtonGroupItemDescription = ({
  size = "md",
  ...rest
}: ComponentProps<typeof Item.Description>) => {
  return <Item.Description size={size} {...rest} />
}

/**
 * Displays a list of radio toggles that look like buttons.
 */
export const RadioButtonGroup = Object.assign(RadioButtonGroupBase, {
  Item: Object.assign(RadioButtonGroupItemBase, {
    Content: RadioButtonGroupItemContent,
    Title: RadioButtonGroupItemTitle,
    Description: RadioButtonGroupItemDescription,
  }),
})