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

'use client';

/**
 * @file ChatLayoutScrollButton.tsx
 * @input Uses React, StyleX, Button, Icon, theme tokens
 * @output Exports ChatLayoutScrollButton component
 * @position Composable scroll-to-bottom button for use inside ChatLayout
 *
 * Renders inside the layout's dock container. Fades in when visible,
 * expands to show a label when provided (e.g. "New messages").
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Chat/index.ts (exports)
 * - /packages/cli/assets/templates/blocks/components/ChatLayoutScrollButton/ (block examples)
 */
import React from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
import { Icon } from "../Icon/index.js";
import { Button } from "../Button/index.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 ChatLayoutScrollButtonProps extends Omit<BaseProps<HTMLDivElement>, 'onClick'> {
  ref?: React.Ref<HTMLDivElement>;
  /** Whether the button is visible. */
  isVisible: boolean;
  /** Optional label — expands the button (e.g. "New messages"). */
  label?: string;
  /** Click handler. */
  onClick: () => void;
}

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

const styles = {
  wrapper: {
    k1xSpc: "x78zum5",
    kjj79g: "xl56j7k",
    kGO01o: "xvmdzux",
    $$css: true as const
  },
  button: {
    "--radius-element": "xnpej1e",
    khDVqt: "xuxw1ft",
    kg3NbH: "xf314gf",
    $$css: true as const
  },
  buttonWithLabel: {
    kwRFfy: "x1t818jl",
    $$css: true as const
  }
};

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

/**
 * Floating scroll-to-bottom button for use inside ChatLayout.
 *
 * @example
 * ```
 * <ChatLayoutScrollButton isVisible={!isAtBottom} onClick={scrollToBottom} />
 * ```
 */
export function ChatLayoutScrollButton({
  ref,
  isVisible,
  label,
  onClick,
  xstyle,
  className,
  style,
  ...rest
}: ChatLayoutScrollButtonProps) {
  const t = useTranslator();
  return <div ref={ref} {...mergeProps(themeProps('chat-layout-scroll-button'), stylex.props(styles.wrapper, xstyle), className, style)} {...rest}>
      <div {...{
      0: {
        className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl x1x67gh"
      },
      2: {
        className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w x1x67gh"
      },
      1: {
        className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl x1ncir08"
      },
      3: {
        className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w x1ncir08"
      }
    }[Number(!!isVisible) << 1 | Number(!!label) << 0]}>
        <Button label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')} aria-label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')} icon={<Icon icon="chevronDown" size="md" />} variant="ghost" size="md" isIconOnly={!label} onClick={onClick} xstyle={[styles.button, label ? styles.buttonWithLabel : null]}>
          {label ?? undefined}
        </Button>
      </div>
    </div>;
}
ChatLayoutScrollButton.displayName = 'ChatLayoutScrollButton';