import React from "react";
import ChatInput from "./chatInput";
import SunIcon from "../../assets/sun.png";
import SmartBotIcon from "../../assets/smartBotAlan.svg";

// Function to get appropriate greeting based on time of day
const getGreeting = () => {
  const hour = new Date().getHours();

  if (hour >= 5 && hour < 12) {
    return "Good Morning";
  } else if (hour >= 12 && hour < 16) {
    return "Good Afternoon";
  } else {
    return "Good Evening";
  }
};

export const NewChatComponent = ({
  onClose,
  userName,
  inputValue,
  setInputValue,
  setIsNewChat,
  onSendIconClick,
  userChats,
  setUserChats,
  moduleList,
  onModuleClick,
  activeList,
  handleRefresh,
  handleSaveChat,
  handleMicClick,
  hideMenuArrow,
  isModuleListLoading,
  suggestionBanner,
  isStopIcon,
  onStopIconClick,
  onCloseSuggestionBanner,
  showSuggestionBanner,
  customInputComponent,
}) => {
  const [loading, setLoading] = React.useState(true);
  const [greeting, setGreeting] = React.useState(getGreeting());

  React.useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 450);
    return () => clearTimeout(timer);
  }, []);

  // Update greeting when component mounts
  React.useEffect(() => {
    setGreeting(getGreeting());
  }, []);

  return (
    <>
      <div className="chatbot-component-body">
        <div className="chatbot-component-body-container">
          <div
            className={`chatbot-component-body-icon${
              loading ? " rotating" : ""
            }`}
          >
            <img src={SmartBotIcon} />
          </div>
          <div className="chatbot-component-body-text">
            <span className="chatbot-component-body-text-title">
              {greeting}{" "}
              <span className="chatbot-component-body-text-username">
                {userName}!
              </span>
              <img src={SunIcon} alt="sun" style={{}} />
            </span>
            <span className="chatbot-component-body-text-description">
              I am Alan, how can I help you today?
            </span>
          </div>
          <div className="chatbot-component-body-input-container">
            <ChatInput
              inputValue={inputValue}
              setInputValue={setInputValue}
              setIsNewChat={setIsNewChat}
              onSendIconClick={onSendIconClick}
              userChats={userChats}
              setUserChats={setUserChats}
              activeList={activeList}
              handleRefresh={handleRefresh}
              handleSaveChat={handleSaveChat}
              handleMicClick={handleMicClick}
              suggestionBanner={suggestionBanner}
              isStopIcon={isStopIcon}
              onStopIconClick={onStopIconClick}
              minRows={4}
              newChatScreen={true}
              onCloseSuggestionBanner={onCloseSuggestionBanner}
              showSuggestionBanner={showSuggestionBanner}
              customInputComponent={customInputComponent}
            />
          </div>
        </div>
      </div>
    </>
  );
};
