import React, { useState } from "react";
import { Button } from "../Button";
import ClearIcon from "@mui/icons-material/Clear";
import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
import ChatInput from "./chatInput";

export const CustomScreen = ({
  onClose,
  customScreenJsx,
  userChats,
  setUserChats,
  onSendIconClick,
  activeList,
  handleRefresh,
  handleSaveChat,
  handleMicClick,
  suggestionBanner,
  isStopIcon,
  onStopIconClick,
  onCloseSuggestionBanner,
  showSuggestionBanner,
  customInputComponent,
  isFullWidth,
  onMinimiseChatBot,
}) => {
  const [input, setInput] = useState("");
  return (
    <div
      className="chatbot-landing-screen-container"
      style={{ pointerEvents: "auto" }}
    >
      {!isFullWidth && (
        <div className="chatbot-landing-screen-container-close-icon">
          {onMinimiseChatBot && (
            <Button
              className="chatbot-component-header-close-icon"
              icon={<RemoveRoundedIcon />}
              onClick={onMinimiseChatBot}
              iconPlacement="left"
              size="large"
              type="default"
              variant="text"
            />
          )}
          <Button
            className="chatbot-component-header-close-icon"
            onClick={onClose}
            icon={<ClearIcon />}
            iconPlacement="left"
            size="large"
            type="default"
            variant="text"
          />
        </div>
      )}
      <div className="chatbot-landing-screen-container-body">
        {customScreenJsx}
        <div className="conversation-footer-container">
          <ChatInput
            inputValue={input}
            setInputValue={setInput}
            minRows={1}
            userChats={userChats}
            setUserChats={setUserChats}
            onSendIconClick={onSendIconClick}
            activeList={activeList}
            handleRefresh={handleRefresh}
            handleSaveChat={handleSaveChat}
            handleMicClick={handleMicClick}
            suggestionBanner={suggestionBanner}
            isStopIcon={isStopIcon}
            onStopIconClick={onStopIconClick}
            customScreen={true}
            onCloseSuggestionBanner={onCloseSuggestionBanner}
            showSuggestionBanner={showSuggestionBanner}
            customInputComponent={customInputComponent}
          />
        </div>
      </div>
    </div>
  );
};
