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

'use client';

/**
 * @file ChatSendButton.tsx
 * @input Uses Button, ChatComposerContext, icon registry
 * @output Exports ChatSendButton — a circular send/stop toggle button
 * @position Standalone component; default send button for ChatComposer
 *
 * Reads composer state from ChatComposerContext by default so it "just
 * works" inside ChatComposer. All context-derived values can be
 * overridden via props for standalone usage.
 *
 * States:
 * - **Send** — accent/primary, arrowUp icon, disabled when nothing to send.
 * - **Stop** — neutral/secondary, stop icon, calls onStop.
 */
import React, { type ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import { Button } from "../Button/index.js";
import { useIcon } from "../Icon/index.js";
import { useChatComposerContext } from "./ChatContext.js";
import type { BaseProps } from "../BaseProps.js";
import { mergeProps } from "../utils/index.js";
import { themeProps } from "../utils/themeProps.js";
import { useTranslator } from "../i18n/index.js";

// =============================================================================
// Types
// =============================================================================

export interface ChatSendButtonProps extends BaseProps<HTMLButtonElement> {
  ref?: React.Ref<HTMLButtonElement>;
  /** Whether the stop button is shown instead of the send button. @default false */
  isStopShown?: boolean;
  /** Whether the send button is disabled. Defaults to `!canSend` from context. */
  isDisabled?: boolean;
  /** Called when the user clicks the send button. Defaults to context onSubmit. */
  onSend?: () => void;
  /** Called when the user clicks the stop button. */
  onStop?: () => void;
  /** Icon for the send state. Resolves from icon registry by default. */
  sendIcon?: ReactNode;
  /** Icon for the stop state. Resolves from icon registry by default. */
  stopIcon?: ReactNode;
  /** Button size. @default 'md' */
  size?: 'sm' | 'md';
}

// =============================================================================
// Styles
// =============================================================================

const styles = {
  root: {
    kaIpWk: "xy0xnkn",
    kmuXW: "x2lah0s",
    $$css: true as const
  }
};

// =============================================================================
// Component
// =============================================================================

/**
 * Circular send/stop toggle button for the chat composer.
 *
 * Reads state from ChatComposerContext by default. Override any value
 * via props for standalone usage.
 *
 * @example
 * ```
 * <ChatComposer onSubmit={handleSubmit} sendButton={<ChatSendButton />} />
 * ```
 */
export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
  const t = useTranslator();
  const context = useChatComposerContext();
  const {
    isStopShown = context?.isStopShown ?? false,
    isDisabled = !(context?.canSend ?? false),
    onSend,
    onStop = context?.onStop,
    sendIcon,
    stopIcon,
    size = 'md',
    xstyle,
    className,
    style,
    ref,
    ...rest
  } = props;
  const handleSend = onSend ?? (() => context?.onSubmit(context.value));
  const defaultStopIcon = useIcon('stop');
  const defaultSendIcon = useIcon('arrowUp');
  return <Button ref={ref} label={isStopShown ? t('@astryx.chatSendButton.stop') : t('@astryx.chatSendButton.send')} variant={isStopShown ? 'secondary' : 'primary'} size={size} icon={isStopShown ? stopIcon ?? defaultStopIcon : sendIcon ?? defaultSendIcon} isIconOnly isDisabled={!isStopShown && isDisabled} onClick={isStopShown ? onStop : handleSend} {...rest} {...mergeProps(themeProps('chat-send-button'), {
    className
  }, style)} xstyle={[styles.root, xstyle]} />;
}
ChatSendButton.displayName = 'ChatSendButton';