import React, { useState } from "react";
import { ComingSoonPage } from "../../pages/Misc/ComingSoonPage";
import ProjectPermission from "./ProjectPermission";

const ProjectSetting = () => {
  const [activePill, setActivePill] = useState("Permissions")
  // const [activePill, setActivePill] = useState(() => {
  //   return localStorage.getItem("lastActiveProjectSettingTab") || "Permissions";
  // });
  const projectSettingTab = [
    { key: "Permissions", label: "Permissions" },
    { key: "Notification", label: "Notification" },
    { key: "SeparatedLink", label: "Separated link", isButton: true },
  ];
  const handlePillClick = (pillKey) => {
    setActivePill(pillKey);
    localStorage.setItem("lastActiveProjectSettingTab", pillKey);
  };

  const renderContent = () => {
    switch (activePill) {
      case "Permissions":
        return <ProjectPermission />;

      case "Notification":
        return <ComingSoonPage />;

      default:
        return <ComingSoonPage />;
    }
  };

  return (
    <div className="w-100">
      <div className="card py-2 px-5">
        {/* <div className="col-12">
          <div className="dropdown text-end">
            <button
              className="btn btn-sm btn-outline-primary dropdown-toggle"
              type="button"
              id="dropdownMenuButton"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              {activePill || "Select Option"}
            </button>

            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
              {projectSettingTab.map((item) =>
                item.isButton ? (
                  <li key={item.key}>
                    <button className="dropdown-item">{item.label}</button>
                  </li>
                ) : (
                  <li key={item.key}>
                    <button
                      className="dropdown-item"
                      onClick={() => handlePillClick(item.key)}
                    >
                      {item.label}
                    </button>
                  </li>
                )
              )}
            </ul>
          </div>
        </div> */}

        <div className="mt-3">{renderContent()}</div>
      </div>
    </div>
  );
};

export default ProjectSetting;