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

const RewardSlider = ({ user }: { user: UserProfile }) => {
  const tabs = [
    { name: "My Twitch", href: "#", current: true },
    { name: "My Channel", href: "#", current: false },
  ];
  const [pTabs, setPTabs] = useState(tabs);
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const activeId = pTabs.find((tab) => tab.current)?.name;
  useEffect(() => {
    if (user) {
      const newProfile = (() => user)();
      console.log(newProfile, "newProfile");
      setProfile(newProfile);
    }
    console.log("useEffect", `User: ${String(profile ?? "none")}`);
  }, [user]);
  function handleClick(
    e: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>
  ) {
    // const updatedTab = pTabs?.find((tab) => tab.name === e.target.innerText);
    const input = e.target as HTMLInputElement;
    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="w-full">
      <div className="block">
        <div className="">
          <nav className="nav nav-tabs -mb-px flex-col " aria-label="Tabs">
            <div className="nav-item relative flex justify-around gap-1">
              {pTabs.map((tab) => (
                <a
                  key={tab.name}
                  href={
                    tab.name === "My Twitch"
                      ? "#tabs-home"
                      : tab.name === "My Channel"
                      ? "#tabs-profile"
                      : "#tabs-messages"
                  }
                  id={
                    tab.name === "My Twitch"
                      ? "tabs-home-tab"
                      : tab.name === "My Channel"
                      ? "tabs-profile-tab"
                      : "tabs-messages-tab"
                  }
                  data-bs-toggle="pill"
                  data-bs-target={
                    tab.name === "My Twitch"
                      ? "#tabs-home"
                      : tab.name === "My Channel"
                      ? "#tabs-profile"
                      : "#tabs-messages"
                  }
                  role="tab"
                  aria-controls={
                    tab.name === "My Twitch"
                      ? "tabs-home"
                      : tab.name === "My Channel"
                      ? "tabs-profile"
                      : "tabs-messages"
                  }
                  aria-selected={tab.name === "My Twitch" ? "true" : "false"}
                  className={classNames(
                    tab.current
                      ? "transform   text-[#dedee3] transition-transform"
                      : "transform border-transparent text-[#dedee3] transition-transform hover:border-gray-300 hover:text-gray-700",
                    " w-1/4 px-1 pt-4 text-center text-xs font-medium text-[#deded3] "
                  )}
                  aria-current={tab.current ? "page" : undefined}
                  onClick={(e) => handleClick(e)}
                >
                  {tab.name}
                </a>
              ))}
              <div
                id="RewardSlider"
                className={classNames(
                  activeId === "My Twitch"
                    ? "-translate-x-[5.013rem]"
                    : "translate-x-[4.993rem]",
                  "absolute inset-y-0 flex h-1 w-1/3 translate-y-[2.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" id="tabs-tabContent">
              <div
                className="tab-pane show active fade"
                id="tabs-home"
                role="tabpanel"
                aria-labelledby="tabs-home-tab"
              >
                {/* {allCards()} */}
                <div className="flex h-[20rem] w-full flex-col">
                  <p className="border-b-[0.05rem] border-[rgba(83,83,95,0.48)] py-2 pt-4 pl-4 text-sm text-[#848494]">
                    Most Recent
                  </p>
                  <div className="flex flex-col overflow-auto scrollbar-hide">
                    <div className="flex w-full flex-col items-start justify-start  scrollbar-hide">
                      <div className="flex w-full flex-1 grow flex-col  justify-start  text-left ">
                        {profile &&
                          profile.notifications &&
                          profile.notifications.map(
                            (notification, index: number) => (
                              <div
                                key={`pTab-${index}`}
                                className="flex h-24 w-full flex-1 grow items-center justify-center"
                              >
                                <div className="ml-2 h-3/5 w-1 bg-violet-600"></div>

                                <div className="flex h-full w-full justify-start border-b-[0.05rem] border-transparent">
                                  <div className="flex items-center justify-center">
                                    <img
                                      src="https://static-cdn.jtvnw.net/dartapi-assets/passive_moments_notification_badge.png"
                                      alt="notification badge"
                                      className="h-12 p-2"
                                    />
                                  </div>
                                  <div
                                    className="flex w-3/4 flex-col items-start justify-center pl-2"
                                    key={index}
                                  >
                                    <a className="text-xs text-[#dedee3]">
                                      {notification.title}
                                    </a>
                                    <a className="text-xs text-[#dedee3]">
                                      {notification.date}
                                    </a>
                                  </div>
                                </div>
                              </div>
                            )
                          )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="tab-pane fade"
                id="tabs-profile"
                role="tabpanel"
                aria-labelledby="tabs-profile-tab"
              >
                {/* {freeCards()} */}
                <div>free</div>
              </div>
              <div
                className="tab-pane fade"
                id="tabs-messages"
                role="tabpanel"
                aria-labelledby="tabs-profile-tab"
              >
                {/* {soonCards()} */}
                <div>sonn</div>
              </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 RewardSlider;