"use client";

import type { ButtonProps } from "@chakra-ui/react";
import {
  Button,
  Toggle as ChakraToggle,
  useToggleContext,
} from "@chakra-ui/react";
import * as React from "react";

interface ToggleProps extends ChakraToggle.RootProps {
  variant?: keyof typeof variantMap;
  size?: ButtonProps["size"];
}

const variantMap = {
  solid: { on: "solid", off: "outline" },
  surface: { on: "surface", off: "outline" },
  subtle: { on: "subtle", off: "ghost" },
  ghost: { on: "subtle", off: "ghost" },
} as const;

export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
  function Toggle(props, ref) {
    const { variant = "subtle", size, children, ...rest } = props;
    const variantConfig = variantMap[variant];

    return (
      <ChakraToggle.Root asChild {...rest}>
        <ToggleBaseButton size={size} variant={variantConfig} ref={ref}>
          {children}
        </ToggleBaseButton>
      </ChakraToggle.Root>
    );
  },
);

interface ToggleBaseButtonProps extends Omit<ButtonProps, "variant"> {
  variant: Record<"on" | "off", ButtonProps["variant"]>;
}

const ToggleBaseButton = React.forwardRef<
  HTMLButtonElement,
  ToggleBaseButtonProps
>(function ToggleBaseButton(props, ref) {
  const toggle = useToggleContext();
  const { variant, ...rest } = props;
  return (
    <Button
      variant={toggle.pressed ? variant.on : variant.off}
      ref={ref}
      {...rest}
    />
  );
});

export const ToggleIndicator = ChakraToggle.Indicator;