import React, { useState } from "react";
import { Link } from "react-router-dom";
// import authProfilePic from "../../assets/images/auth-profile-picture.png";
// import profileBanner from "../../assets/images/profile-cover.png";
// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
// import marketPlace from "../../data/marketplace_data.json";
import products from "../../data/product_data.json";
import Layout from "../Partials/Layout";
import ActivitiesTab from "./ActivitiesTab";
import CollectionTab from "./CollectionTab";
import CreatedTab from "./CreatedTab";
import HiddenProductsTab from "./HiddenProductsTab";
import OnSaleTab from "./OnSaleTab";
import OwnTab from "./OwnTab";
import LoadingSpinner from "../Spinners/LoadingSpinner";

export default function Resources(props) {
  // console.log("RESOURCES=>", props);
  // const mainProducts = products.datas;
  const ownProducts = products.datas;

  // Resource Props
  const __resources = props.MyResourceData;

  // Collection Items
  const collectionProducts = __resources?.collectiondata?.data;
  const tab_categories = __resources?.tab_categories?.data;
  const onSaleProducts = __resources?.marketdata?.data;
  const CreatedSell = __resources?.marketdata?.data;
  const CreatedBits = __resources?.productdata?.data;

  const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");

  const tabHandler = (value) => {
    setTab(value);
  };

  // Category Components
  const tabComponents = {
    onsale: <OnSaleTab products={onSaleProducts} />,
    owned: <OwnTab products={ownProducts} />,
    created: (
      <CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />
    ),
    hidden: (
      <HiddenProductsTab
        marketProducts={CreatedSell}
        mainProducts={CreatedBits}
      />
    ),
    collection: <CollectionTab products={collectionProducts} />,
    activity: <ActivitiesTab />,
  };

  const defaultTabComponent = <OnSaleTab products={onSaleProducts} />;

  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;

  // Tab Item Component
  const TabItem = ({ tabValue, isActive }) => {
    return (
      <li
        className={`relative group inline`}
        onClick={() => tabHandler(tabValue.name)}
      >
        <span
          className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
            isActive
              ? "text-purple border-purple"
              : "text-dark-gray dark:text-white border-transparent"
          }`}
        >
          {tabValue.content}
        </span>
        <span
          className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
            isActive
              ? "text-white bg-pink"
              : "text-thin-light-gray bg-[#F2B8FD]"
          }`}
        >
          16
        </span>
      </li>
    );
  };

  // Tab List Component
  const TabList = ({ tabCategories }) => {
    return (
      <ul className="lg:flex lg:space-x-14 space-x-8">
        {tabCategories.length > 0 &&
          tabCategories?.map((tabValue, idx) => (
            <TabItem
              key={tabValue.id}
              tabValue={tabValue}
              isActive={tab === tabValue.name || (idx === 0 && tab === "")}
            />
          ))}
      </ul>
    );
  };

  return (
    <>
      <Layout>
        <div className="nft-authprofile-wrapper w-full">
          {props.MyResourceData.length == 0 ||
          Object.keys(props.MyResourceData).length == 0 ? (
            <div className="w-full h-full flex items-center justify-center">
              <LoadingSpinner size={16} color="sky-blue" />
            </div>
          ) : (
            <div className="main-wrapper w-full">
              <div className="content-wrapper-profile-only w-full mb-6">
                <div className="auth-tab-content relative mb-10">
                  <div className="lg:flex justify-between">
                    <div className="tab-items">
                      <ul className="lg:flex lg:space-x-14 space-x-8">
                        <TabList tabCategories={tab_categories} />
                      </ul>
                    </div>
                    <div style={{ transform: "translateY(-22px)" }}>
                      <Link
                        to="/upload-product"
                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
                      >
                        Upload Product
                      </Link>
                    </div>
                  </div>
                  <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                </div>
              </div>

              <div className="tab-cotainer w-full mb-10">
                {selectedTabComponent}
              </div>
            </div>
          )}
        </div>
      </Layout>
    </>
  );
}