import { MobileChatComposer } from "@code/ui/components/mobile-chat";
import { LoaderCircle } from "lucide-react";
import type { ReactNode } from "react";

import { useChatComposer } from "@/hooks/chat/use-chat-composer";
import type { ChatComposerProps } from "@/lib/chat/types";

export const ChatComposer = ({ error, onSend, status }: ChatComposerProps) => {
  const busy =
    status === "connecting" || status === "submitted" || status === "streaming";
  const composer = useChatComposer({ busy, onSend });

  let statusMessage: ReactNode;
  if (busy) {
    statusMessage = (
      <span className="inline-flex items-center gap-1.5">
        <LoaderCircle className="size-3 animate-spin" />
        {status === "connecting" ? "Preparing Zopu" : "Zopu is responding"}
      </span>
    );
  }

  return (
    <MobileChatComposer
      busy={busy}
      canSend={composer.canSend}
      errorMessage={
        error ? error.message || "Message failed to send" : undefined
      }
      onSubmit={composer.handleSubmit}
      statusMessage={statusMessage}
      textareaProps={{
        ...composer.inputProps,
        "aria-describedby": error ? "composer-error" : undefined,
        "aria-invalid": error ? true : undefined,
        disabled: busy,
      }}
    />
  );
};