import { ReactNode, RefObject } from 'react';
import { twMerge } from 'tailwind-merge';

import { useChatInputStore } from '../../stores';

// Constants
export const BUTTON_WIDTH = 32; // px
export const COLLAPSED_HEIGHT = 32; // px

interface ChatInputBarActionsProps {
  plusButton: ReactNode;
  textInputArea: ReactNode;
  textInputRef: RefObject<HTMLTextAreaElement | null>;
  referencesArea: ReactNode;
  microphoneButton: ReactNode;
  submitButton: ReactNode;
  diceButton?: ReactNode;
  className?: string;
}

export const ChatInputBarActions: React.FC<ChatInputBarActionsProps> = ({
  plusButton,
  textInputArea,
  textInputRef,
  referencesArea,
  microphoneButton,
  submitButton,
  diceButton,
  className,
}) => {
  const { input } = useChatInputStore();

  const handleFocusInput = () => {
    textInputRef.current?.focus();
  };

  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
    <div
      className='flex cursor-text flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'
      onClick={handleFocusInput}
    >
      {referencesArea && <div className='px-2 pt-2 pb-0'>{referencesArea}</div>}
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        {textInputArea}
      </div>
      <div
        className={twMerge(`flex items-center px-4 py-3`, className)}
        style={{ minHeight: `${COLLAPSED_HEIGHT}px` }}
      >
        {/* Column 1: Plus button */}
        <div
          className={`flex flex-shrink-0 items-end justify-center`}
          style={{ width: `${BUTTON_WIDTH}px` }}
        >
          {plusButton}
        </div>

        {/* Column 2: Spacer to push mic/submit button to right */}
        <div className='flex flex-1 items-end' />

        {/* Column 3: Submit/Microphone button */}
        <div className='flex flex-shrink-0 items-center justify-center gap-2'>
          {diceButton}
          {input.trim().length > 0 ? submitButton : microphoneButton}
        </div>
      </div>
    </div>
  );
};