import React, { useState } from "react";
import BookMarkIcon from "../../assets/bookmarkIcon.svg";
import { Button } from "../Button";
import AddIcon from "@mui/icons-material/Add";
import CloseIcon from "../../assets/close.svg";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import MoreVertIcon from "@mui/icons-material/MoreVert";

export const BookMarkPanel = ({
  preDefinedQuestions,
  addedByYouQuestions,
  onClose,
}) => {
  const [activeTab, setActiveTab] = useState("preDefined");
  return (
    <div className="book-mark-panel-container-wrapper">
      <div className="book-mark-panel-container">
        <div className="book-mark-panel-header">
          <div className="book-mark-panel-header-left">
            <img src={BookMarkIcon} alt="bookmark" />
            <span className="book-mark-panel-header-left-title">
              Saved Questions
            </span>
          </div>
          <div className="book-mark-panel-header-right">
            <Button
              variant="secondary"
              icon={<AddIcon />}
              iconPlacement="right"
            >
              Add
            </Button>
            <img src={CloseIcon} alt="close" onClick={onClose} />
          </div>
        </div>
        <div className="book-mark-panel-tabs-container">
          <div className="bookmark-tabs">
            <span
              className={`bookmark-tab ${
                activeTab === "preDefined" ? "active" : ""
              }`}
              onClick={() => setActiveTab("preDefined")}
            >
              Pre Defined
            </span>
            <span
              className={`bookmark-tab ${
                activeTab === "addedByYou" ? "active" : ""
              }`}
              onClick={() => setActiveTab("addedByYou")}
            >
              Added by You
            </span>
          </div>
        </div>
        {activeTab === "predefined"
          ? preDefinedQuestions?.map((item, idx) => (
              <div key={idx} className="bookmark-panel-body">
                <span className="drag-handle">⋮⋮</span>
                <span className="bookmark-question-text">{item.question}</span>
                <span className="bookmark-menu">⋮</span>
              </div>
            ))
          : addedByYouQuestions?.map((item, idx) => (
              <div key={idx} className="bookmark-panel-body">
                <DragIndicatorIcon fontSize="small" />
                <span className="bookmark-question-text">{item.question}</span>
                <MoreVertIcon fontSize="small" />
              </div>
            ))}
      </div>
    </div>
  );
};
