"use client";
/*
 * Documentation:
 * Switch — https://app.subframe.com/f023064a5ca0/library?component=Switch_7a464794-9ea9-4040-b1de-5bfb2ce599d9
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface ThumbProps
  extends React.ComponentProps<typeof SubframeCore.Switch.Thumb> {
  variant?: "off" | "on" | "disabled";
  className?: string;
}

const Thumb = React.forwardRef<HTMLDivElement, ThumbProps>(function Thumb(
  { variant = "off", className, ...otherProps }: ThumbProps,
  ref
) {
  return (
    <SubframeCore.Switch.Thumb asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "group/deb91878 flex h-4 w-4 cursor-pointer flex-col items-start gap-2 rounded-round bg-brand-brand-surface-solid-default group-hover/7a464794:bg-brand-brand-surface-solid-hover",
          {
            "bg-icon-neutral-disabled": variant === "disabled",
            "bg-icon-neutral-on-solid group-hover/7a464794:bg-icon-neutral-on-solid":
              variant === "on",
          },
          className
        )}
        ref={ref}
      />
    </SubframeCore.Switch.Thumb>
  );
});

export interface SwitchRootProps
  extends React.ComponentProps<typeof SubframeCore.Switch.Root> {
  disabled?: boolean;
  checked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  className?: string;
}

const SwitchRoot = React.forwardRef<HTMLDivElement, SwitchRootProps>(
  function SwitchRoot(
    {
      disabled = false,
      checked = false,
      className,
      ...otherProps
    }: SwitchRootProps,
    ref
  ) {
    return (
      <SubframeCore.Switch.Root
        checked={checked}
        asChild={true}
        disabled={disabled}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "group/7a464794 flex w-full min-w-[36px] max-w-[36px] cursor-pointer flex-col items-start justify-center gap-2 rounded-round border border-solid border-brand-brand-border-solid-default bg-surface-neutral-primary px-0.5 py-0.5 hover:border hover:border-solid hover:border-brand-brand-border-solid-hover focus-within:shadow-focus aria-[checked=true]:bg-brand-brand-surface-solid-default hover:aria-[checked=true]:bg-brand-brand-surface-solid-hover",
            {
              "border border-solid border-border-disabled bg-surface-neutral-disabled hover:border hover:border-solid hover:border-border-disabled focus-within:shadow-none":
                disabled,
            },
            className
          )}
          ref={ref}
        >
          <Thumb variant={checked ? "on" : disabled ? "disabled" : undefined} />
        </div>
      </SubframeCore.Switch.Root>
    );
  }
);

export const Switch = Object.assign(SwitchRoot, {
  Thumb,
});