// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

/**
 * @file InputClearButton.tsx
 * @input Uses React, Button, Icon
 * @output Exports the public InputClearButton and an internal popup-aware variant.
 * @position Shared primitive. Every input that renders a clear affordance —
 *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
 *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
 *   routes it through here, so the glyph is themed in one place via the
 *   `astryx-input-clear-icon` target and the button wrapper is themed via the
 *   `astryx-input-clear-button` target.
 */
import type { ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import { Button } from "../Button/index.js";
import { Icon } from "../Icon/index.js";
import { themeProps } from "../utils/themeProps.js";
const styles = {
  button: {
    kZKoxP: "x1qx5ct2",
    kmuXW: "x2lah0s",
    kVAEAm: "x1n2onr6",
    "--_input-clear-hit-inset": "xtoycft x181bpwf",
    "--_input-clear-hit-content": "xqxtgf4 xp8r40j",
    k5JduY: "xh3pasq",
    kwXMNM: "x1j6awrg",
    kv0HGH: "xht581f",
    $$css: true as const
  }
};
export interface InputClearButtonProps {
  label: string;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  xstyle?: stylex.StyleXStyles;
  /**
   * Extra class(es) for the clear glyph itself, merged onto the shared
   * `astryx-input-clear-icon` target. Used by inputs that shipped a
   * component-specific clear-icon target before the family converged here
   * (e.g. `astryx-date-input-clear-icon`) to keep emitting it for backwards
   * compatibility; new callers don't need it.
   */
  iconClassName?: string;
}
interface InternalInputClearButtonProps extends InputClearButtonProps {
  onPointerDown: React.PointerEventHandler<HTMLElement>;
  onClickCapture: React.MouseEventHandler<HTMLElement>;
}
type InputClearButtonRenderProps = InputClearButtonProps & Partial<Pick<InternalInputClearButtonProps, 'onPointerDown' | 'onClickCapture'>>;
function renderInputClearButton({
  label,
  onClick,
  onPointerDown,
  onClickCapture,
  xstyle,
  iconClassName
}: InputClearButtonRenderProps): ReactNode {
  const {
    className: iconTargetClassName
  } = themeProps('input-clear-icon');
  const {
    className: buttonTargetClassName
  } = themeProps('input-clear-button');
  return <Button variant="ghost" size="sm" label={label} className={buttonTargetClassName} icon={<Icon icon="close" size="sm" color="secondary" className={iconClassName != null ? `${iconTargetClassName} ${iconClassName}` : iconTargetClassName} />} onPointerDown={e => {
    e.preventDefault();
    onPointerDown?.(e);
  }} onMouseDown={e => e.preventDefault()} onClick={onClick} onClickCapture={onClickCapture} isIconOnly xstyle={[styles.button, xstyle]} />;
}
export function InputClearButton(props: InputClearButtonProps): ReactNode {
  return renderInputClearButton(props);
}

/** Internal variant used while popup-aware clear behavior is rolled out. */
export function InternalInputClearButton(props: InternalInputClearButtonProps): ReactNode {
  return renderInputClearButton(props);
}
InputClearButton.displayName = 'InputClearButton';