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

const Notifications = ({}: // allCards,
//freeCards,
//soonCards,
{
  //allCards: () => (JSX.Element | null)[];
  //freeCards: () => (JSX.Element | null)[];
  //soonCards: () => (JSX.Element | null)[];
}) => {
  const tabs = [
    { name: "My Twitch", href: "#", current: true },
    { name: "My Channel", href: "#", current: false },
  ];
  const [pTabs, setPTabs] = useState(tabs);
  const activeId = pTabs.find((tab) => tab.current)?.name;
  function handleClick(e: React.MouseEvent<HTMLAnchorElement>) {
    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;
    });
  }

  const MyNotifications = () => {
    return (
      <div className="flex flex-col items-center justify-center">
        <p>Most Recent</p>
        <div className="flex">
          <div>img</div>
          <div className="w-full">dopdown content</div>
        </div>
      </div>
    );
  };
  const ChannelNotifications = () => {
    return (
      <div className="flex flex-col items-center justify-center">
        <p>Most Recent</p>
        <div className="flex">
          <div>img</div>
          <div className="w-full">content</div>
        </div>
      </div>
    );
  };
  return (
    <div className="w-full">
      <div className="block">
        <div className="">
          <nav
            className="nav nav-tabs -mb-px flex-col overflow-scroll"
            aria-label="Tabs"
          >
            {/* <Menu.Item disabled>
            <div>
              
              <span className="w-full">
                M 
              </span>
              <span className="rounded-t-md bg-slate-900 text-slate-200">
                Notifications
              </span>
<div className="flex items-center justify-center">
<div>
 S
</div>
<div>x</div>
</div> 
            </div>
            </Menu.Item>*/}
            <div className="nav-item relative flex justify-between gap-1 text-[0.60rem]">
              {pTabs.map((tab, index) => (
                <a
                  key={`ptabParent-${index}`}
                  href={
                    tab.name === "My Twitch" ? "#tabs-home" : "#tabs-profile"
                  }
                  id={
                    tab.name === "My Twitch"
                      ? "tabs-home-tab"
                      : "tabs-profile-tab"
                  }
                  data-bs-toggle="pill"
                  data-bs-target={
                    tab.name === "My Twitch" ? "#tabs-home" : "#tabs-profile"
                  }
                  role="tab"
                  aria-controls={
                    tab.name === "My Twitch" ? "tabs-home" : "tabs-profile"
                  }
                  aria-selected={tab.name === "My Twitch" ? "true" : "false"}
                  className={classNames(
                    tab.current
                      ? "transform  text-violet-600 transition-transform "
                      : "transform border-transparent text-gray-500 transition-transform hover:border-gray-300 hover:text-gray-700",
                    "nav-link w-1/4 py-4 px-1 text-center text-[0.60rem] font-medium "
                  )}
                  aria-current={tab.current ? "page" : undefined}
                  onClick={(e) => handleClick(e)}
                >
                  {tab.name}
                </a>
              ))}
              <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-1 w-1/3 translate-y-[3.125rem] 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 overflow-scroll" id="tabs-tabContent">
              <div
                className="tab-pane show active fade"
                id="tabs-home"
                role="tabpanel"
                aria-labelledby="tabs-home-tab"
              >
                {<MyNotifications />}
              </div>
              <div
                className="tab-pane fade"
                id="tabs-profile"
                role="tabpanel"
                aria-labelledby="tabs-profile-tab"
              >
                {<ChannelNotifications />}
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  );
};

export default Notifications;