import type { FormEvent } from "react";
import { useState } from "react";

export const useMobileWorkspace = (initialExpanded = false) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [composerValue, setComposerValue] = useState("");
  const [expanded, setExpanded] = useState(initialExpanded);
  const [statusMessage, setStatusMessage] = useState<string>();

  const handleComposerChange = (value: string) => {
    setComposerValue(value);
    setStatusMessage(undefined);
  };

  const handleComposerSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const message = composerValue.trim();
    if (!message) {
      return;
    }
    setComposerValue("");
    setStatusMessage("Added to Zopu’s queue");
  };

  return {
    activeIndex,
    composerValue,
    expanded,
    handleActiveIndexChange: setActiveIndex,
    handleComposerChange,
    handleComposerSubmit,
    setExpanded,
    statusMessage,
  };
};