// Adapted from Astryx Button's native button, variant and loading-state model.
// Copyright (c) Meta Platforms, Inc. and affiliates. MIT; see THIRD_PARTY_NOTICES.md.
import {
  createElement,
  type ComponentProps,
  type ComponentType,
  type ReactNode,
} from "react";
import { Slot } from "./_ynrlib/radix-ui.js";
import { GlassButton } from "./glass-button.js";
import type { GlassAppearance } from "./glass-surface.js";
export type { GlassShade, GlassAppearance } from "./glass-surface.js";
import { isIconComponent, type IconProps } from "./icons.js";

export type ButtonSize = "sm" | "md" | "lg";
export type ButtonVariant =
  | "outline"
  | "link"
  | "glass"
  | "glass-icon"
  | "foreground"
  | "icon"
  | "icon-foreground"
  | "ghost"
  | "destructive"
  | "primary"
  | "secondary";
export interface ButtonProps extends ComponentProps<"button">, GlassAppearance {
  asChild?: boolean;
  label?: string;
  /** Omit for a normal button. primary/secondary remain compatible aliases. */
  variant?: ButtonVariant;
  size?:
    | ButtonSize
    | { base: ButtonSize; sm?: ButtonSize; md?: ButtonSize; lg?: ButtonSize };
  isDisabled?: boolean;
  isLoading?: boolean;
  loading?: boolean;
  icon?: ReactNode | ComponentType<IconProps>;
  iconOnly?: boolean;
  iconClassName?: string;
}
export function Button({
  asChild = false,
  variant,
  shade,
  blur,
  refraction,
  dispersion,
  icon,
  label,
  size,
  children,
  isDisabled,
  isLoading,
  loading,
  disabled,
  iconOnly = false,
  iconClassName = "",
  type = "button",
  className = "",
  ...props
}: ButtonProps) {
  const busy = loading || isLoading;
  const hiddenLabel =
    iconOnly || variant === "icon" || variant === "icon-foreground";
  const foreground =
    variant === "foreground" ||
    variant === "icon-foreground" ||
    variant === "primary";
  const compact = hiddenLabel || Boolean(icon && !children && !label);
  const canonicalVariant = foreground
    ? compact
      ? "icon-foreground"
      : "foreground"
    : variant === "ghost" ||
        variant === "destructive" ||
        variant === "outline" ||
        variant === "link"
      ? variant
      : compact
        ? "icon"
        : "normal";
  const legacyVariant = foreground
    ? "primary"
    : variant === "ghost" ||
        variant === "destructive" ||
        variant === "outline" ||
        variant === "link"
      ? variant
      : "secondary";
  const sizes = typeof size === "object" ? size : { base: size };
  if (variant === "glass" || variant === "glass-icon")
    return (
      <GlassButton
        asChild={asChild}
        {...props}
        type={asChild ? undefined : type}
        shade={shade}
        blur={blur}
        refraction={refraction}
        dispersion={dispersion}
        icon={icon}
        label={label}
        iconOnly={iconOnly || variant === "glass-icon"}
        iconClassName={iconClassName}
        size={sizes.base}
        disabled={disabled || isDisabled}
        loading={busy}
        className={`ynr-button ${className}`}
        data-ynr-variant={variant}
        data-variant={variant}
        data-size-sm={"sm" in sizes ? sizes.sm : undefined}
        data-size-md={"md" in sizes ? sizes.md : undefined}
        data-size-lg={"lg" in sizes ? sizes.lg : undefined}
      >
        {children}
      </GlassButton>
    );
  const Comp = asChild ? Slot.Root : "button";
  const blocked = disabled || isDisabled || busy;
  return (
    <Comp
      {...props}
      type={asChild ? undefined : type}
      className={`ynr-button inline-flex items-center justify-center ${compact ? "ynr-button--icon" : ""} ${className}`}
      data-ynr-variant={canonicalVariant}
      data-variant={legacyVariant}
      data-size={sizes.base}
      data-size-sm={"sm" in sizes ? sizes.sm : undefined}
      data-size-md={"md" in sizes ? sizes.md : undefined}
      data-size-lg={"lg" in sizes ? sizes.lg : undefined}
      disabled={blocked}
      aria-disabled={
        (asChild && blocked) || props["aria-disabled"] || undefined
      }
      onClickCapture={(e) => {
        props.onClickCapture?.(e);
        if (asChild && blocked) {
          e.preventDefault();
          e.stopPropagation();
        }
      }}
      aria-busy={busy || props["aria-busy"] || undefined}
    >
      {!asChild && icon && (
        <span
          className={`ynr-button__icon inline-flex ${iconClassName}`}
          aria-hidden="true"
        >
          {isIconComponent(icon)
            ? createElement(icon, { "aria-hidden": true, focusable: false })
            : icon}
        </span>
      )}
      {asChild ? (
        <Slot.Slottable>{children}</Slot.Slottable>
      ) : hiddenLabel ? (
        <span className="ynr-button__sr-only">{children ?? label}</span>
      ) : busy ? (
        <span>Saving…</span>
      ) : (
        (children ?? label)
      )}
    </Comp>
  );
}