import * as React from "react";
import { useState } from "react";
import classNames from "../../../utils/helpers/className";

const Slider = ({
  allCards,
  freeCards,
  soonCards,
}: {
  allCards: () => (JSX.Element | null)[];
  freeCards: () => (JSX.Element | null)[];
  soonCards: () => (JSX.Element | null)[];
}) => {
  const tabs = [
    { name: "All", href: "#", current: false },
    { name: "Free Games", href: "#", current: false },
    { name: "Ending Soon", href: "#", current: false },
  ];

  type PTab = {
    name: string;
    href: string;
    current: boolean;
  };

  const [pTabs, setPTabs] = useState(tabs);
  const activeId = pTabs.find((tab) => tab.current)?.name;
  function handleClick(e: React.MouseEvent<HTMLDivElement>) {
    const input = e.target as HTMLInputElement;
    // const updatedTab = pTabs?.find((tab) => tab.name === input.innerText);
    const activeTab = pTabs?.find((tab) => tab.current);
    if (input.innerText === activeTab?.name) return;

    setPTabs((prev: PTab[]) => {
      const answer = prev.map((tab: PTab) => {
        if (tab.name === activeTab?.name) {
          tab.current = false;
        }
        if (tab.name === input.innerText) {
          tab.current = true;
        }
        return tab;
      });
      return answer;
    });
  }
  return (
    <div className="flex w-full">
      <div className="flex">
        <div className="flex w-full flex-col">
          <nav
            className="nav nav-tabs -mb-px flex-col  px-2 "
            aria-label="Tabs"
          >
            <div className="nav-item relative flex justify-between gap-[0.1rem] border-b-[0.05rem] px-1 text-[#efeff1] border-b-gray-700">
              {pTabs.map((tab, index) => (
                <div
                  key={`tab-${index}`}
                  // ref={
                  //   tab.name === "All"
                  //     ? "#tabs-home"
                  //     : tab.name === "Free Games"
                  //     ? "#tabs-profile"
                  //     : "#tabs-messages"
                  // }
                  id={
                    tab.name === "All"
                      ? "tabs-home-tab"
                      : tab.name === "Free Games"
                      ? "tabs-profile-tab"
                      : "tabs-messages-tab"
                  }
                  data-bs-toggle="pill"
                  data-bs-target={
                    tab.name === "All"
                      ? "#tabs-home"
                      : tab.name === "Free Games"
                      ? "#tabs-profile"
                      : "#tabs-messages"
                  }
                  role="tab"
                  aria-controls={
                    tab.name === "All"
                      ? "tabs-home"
                      : tab.name === "Free Games"
                      ? "tabs-profile"
                      : "tabs-messages"
                  }
                  aria-selected={tab.name === "All" ? "true" : "false"}
                  className={classNames(
                    tab.current
                      ? "transform  text-[0.7rem] text-violet-600 transition-transform"
                      : "transform border-transparent text-[0.7rem] text-[#efeff1] transition-transform hover:border-gray-300 hover:text-gray-700",
                    "nav-link w-1/4 py-1 px-1 text-center text-xs font-medium "
                  )}
                  aria-current={tab.current ? "page" : undefined}
                  onClick={(e) => handleClick(e)}
                >
                  <a
                    role="button"
                    className="cursor-pointer text-[0.7rem] text-white"
                  >
                    {tab.name}
                  </a>
                </div>
              ))}
              <div
                id="slider"
                className={classNames(
                  activeId === "All"
                    ? "-translate-x-slide1"
                    : activeId === "Free Games"
                    ? "translate-x-slide2"
                    : "translate-x-slide3",
                  "absolute inset-y-0 flex h-[0.08rem] w-1/3 translate-y-[1.405rem] transform flex-col items-center justify-center  transition-transform"
                )}
              >
                <div className="inset-y-0 flex h-full w-1/2  flex-col items-center justify-center bg-violet-600 transition-transform"></div>
              </div>
            </div>
            {/* div content section nav link  */}
            <div
              className="tab-content flex h-[97%] w-full  "
              id="tabs-tabContent"
            >
              <div
                className="tab-pane show active fade   "
                id="tabs-home"
                role="tabpanel"
                aria-labelledby="tabs-home-tab"
              >
                {allCards()}
              </div>
              <div
                className="tab-pane fade  "
                id="tabs-profile"
                role="tabpanel"
                aria-labelledby="tabs-profile-tab"
              >
                {freeCards()}
              </div>
              <div
                className=" tab-pane fade"
                id="tabs-messages"
                role="tabpanel"
                aria-labelledby="tabs-profile-tab"
              >
                {soonCards()}
              </div>
              <div
                className="tab-pane fade"
                id="tabs-contact"
                role="tabpanel"
                aria-labelledby="tabs-contact-tab"
              >
                Tab 4 content
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  );
};

export default Slider;