"use client";
import * as BUI from "@base-ui/react";
import { cn } from "tailwind-variants";
import type { ReactNode } from "react";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
import { variantRecipe } from "../../styles/recipe/variant.recipe";
import { CommonProps } from "../../common/CommonProps";
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
import { Slot } from "../../common/Slot";

type CheckboxProps = CommonProps & {
  size?: "xs" | "sm" | "md";
  shape?: "square" | "rounded";
  icon?: ReactNode;
  hideIcon?: boolean;
  iconPlaceholder?: boolean;
};

export const Checkbox = (props: CheckboxProps) => {
  const {
    className,
    children,
    size = "sm",
    shape = "square",
    icon,
    hideIcon = false,
    iconPlaceholder = false,
    disabled,
  } = props;

  const checkboxCls = cn(
    itemSizeRecipe({ size, shape }),
    variantRecipe({ variant: "ghost", disabled }),
    "brand-default",
    className,
  );
  const checkboxRootCls = cn(
    inlineSizeRecipe({
      size,
      shape: "rounded",
      iconOnly: true,
    }),
    "checkbox-root",
    "brand-info",
  );
  const checkIndicatorCls = cn(
    inlineSizeRecipe({
      size,
      shape: "rounded",
      iconOnly: true,
    }),
    "checkbox-indicator",
  );
  const checkIndicatorSvgCls = inlineSizeRecipe({
    size,
    iconOnly: true,
  });

  const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));

  return (
    <BUI.Field.Root>
      <BUI.Field.Label className={checkboxCls}>
        <BUI.Checkbox.Root className={checkboxRootCls}>
          <BUI.Checkbox.Indicator className={checkIndicatorCls}>
            <CheckIndicatorSvg className={checkIndicatorSvgCls} />
          </BUI.Checkbox.Indicator>
        </BUI.Checkbox.Root>
        {icon && !hideIcon && <Slot className={iconCls}>{icon}</Slot>}
        {hideIcon && iconPlaceholder && <span className={iconCls}></span>}
        {children}
      </BUI.Field.Label>
    </BUI.Field.Root>
  );
};