import React, { useState, useEffect } from "react";
import { InputFieldProps } from "~/components/types";
import WaitingInputField from "../widget/components/input-field/components/WaitingInputField";
import ChatOnlyInputField from "./ChatOnlyInputField";

const SimpleInputField: React.FC<InputFieldProps> = ({
  state = "minimized",
  placeholder = "Write a prompt or paste a contract address",
  value = "",
  onChange,
  onSend,
  onStop
}) => {
  const [isMobileView, setIsMobileView] = useState(false);

  useEffect(() => {
    const checkScreenSize = () => {
      setIsMobileView(window.innerWidth <= 768);
    };

    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);

    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  if (state === "generating") {
    return (
      <WaitingInputField
        placeholder={placeholder}
        onStop={onStop}
        isMobileView={isMobileView}
      />
    );
  }

  if (state === "minimized") {
    return (
      <ChatOnlyInputField
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        onSend={onSend}
      />
    );
  }

  return (
    <ChatOnlyInputField
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      onSend={onSend}
    />
  );
};

export default SimpleInputField;