'use client';

import type { ChatStatus } from 'ai';
import { PlusIcon } from 'lucide-react';
import {
  PromptInput,
  PromptInputActionAddAttachments,
  PromptInputActionMenu,
  PromptInputActionMenuContent,
  PromptInputActionMenuTrigger,
  PromptInputAttachment,
  PromptInputAttachments,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  type PromptInputMessage,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from '@/components/ai-elements/prompt-input';

interface ChatInputProps {
  value: string;
  onChange: (value: string) => void;
  onSubmit: (message: PromptInputMessage) => void;
  status?: ChatStatus;
  placeholder?: string;
}

export function ChatInput({
  value,
  onChange,
  onSubmit,
  status = 'ready',
  placeholder,
}: ChatInputProps) {
  return (
    <PromptInput
      className="[&_[data-slot=input-group]]:bg-background"
      globalDrop
      multiple
      onSubmit={onSubmit}
    >
      <PromptInputHeader className="pt-1.5 pb-0">
        <PromptInputAttachments className="gap-1.5 px-3 py-0">
          {(attachment) => <PromptInputAttachment data={attachment} />}
        </PromptInputAttachments>
      </PromptInputHeader>
      <PromptInputBody>
        <PromptInputTextarea
          className="min-h-10 py-2"
          onChange={(event) => onChange(event.target.value)}
          placeholder={placeholder}
          value={value}
        />
      </PromptInputBody>
      <PromptInputFooter className="pt-0 pb-2">
        <PromptInputTools>
          <PromptInputActionMenu>
            <PromptInputActionMenuTrigger>
              <PlusIcon className="size-4" />
            </PromptInputActionMenuTrigger>
            <PromptInputActionMenuContent>
              <PromptInputActionAddAttachments />
            </PromptInputActionMenuContent>
          </PromptInputActionMenu>
        </PromptInputTools>
        <PromptInputSubmit
          disabled={status === 'streaming'}
          status={status}
        />
      </PromptInputFooter>
    </PromptInput>
  );
}

export type { PromptInputMessage };