import React, { useEffect, useState } from "react";
import { textTruncate } from "../../../utils/helpers/shortenString";
// import { UserProfile } from "../../../types/notifications";
// import MoreIcon from "../../navbar/moreInfo";
// import { streamingProfile } from "../../../utils/helpers/streamer";
// import { SmallMore } from "../../buttons/SmallMore";
// import TooltipBottom from "../../../utils/helpers/tooltipBottom";
// import MoreReport from "../../buttons/moreReport";
import { Transition } from "@headlessui/react";
import classNames from "../../../utils/helpers/className";
import categories from "../../../../gameCategories.json";
import Image from "next/legacy/image";

const CategoryCardTwo = ({
  newExpand,
  mobile,
}: {
  mobile?: boolean;
  newExpand: any;
}) => {
  const [expand, setExpand] = useState(false);
  const [showNumber, setShowNumber] = useState(false);
  // let handleExpand = (e: any) => {
  //   console.log("expand categories", expand);
  //   setExpand(true);
  // };
  useEffect(() => {
    if (expand) {
      setShowNumber(true);
    }
  }, [expand]);
  return (
    <>
      {categories.map((category, index) => {
        if (index == 0) {
          return (
            <div
              key={`category-${index}`}
              //"wrap flex h-full grow flex-col justify-center md:w-[16%]  lg:w-[15.666667%] xl:w-[11.33334%] 2xl:w-[5.3333%]"
              className={classNames(
                "wrap group flex h-full min-h-[23%] grow flex-col items-start justify-start md:w-[16%]  lg:w-[15.666667%] xl:w-[11.33334%] 2xl:w-[5.3333%]"
              )}
            >
              <Transition
                show={true}
                className="flex h-full w-full grow  flex-wrap gap-2 group-hover:grow "
              >
                <div className="flex  w-full whitespace-normal bg-transparent group-hover:flex-grow">
                  <div className=" relative flex  w-full group-hover:z-20   ">
                    <div className="absolute -top-[1.5em] -left-[0.35em] z-10 m-auto hidden h-[1.0rem] w-[1.0rem] rotate-[45deg] border-[#0e0e10] bg-[#0e0e10] group-hover:flex"></div>
                    <Transition.Child className=" w-full   bg-transparent transition-transform duration-500 group-hover:absolute   group-hover:flex-1  group-hover:translate-x-[0.2em]   group-hover:-translate-y-4 group-hover:border-l-8 group-hover:border-b-8  group-hover:border-l-red-400 group-hover:border-b-yellow-400">
                      <div className=" w-full bg-black">
                        <Image
                          src={`/gameCovers/${category.name
                            .toLowerCase()
                            .replaceAll(" ", "")
                            .replace(/[^a-zA-Z0-9 ]/g, "")}.jpg`}
                          alt="category image"
                          className="h-5 w-5"
                          layout="responsive"
                          width={50}
                          height={65}
                        />
                      </div>
                    </Transition.Child>
                    {/* change %'s to em's  */}
                    <div className=" invisible absolute -bottom-[0.59em] -right-[0.35em] z-10 m-auto h-[0.8rem]  w-[0.8rem] -rotate-[45deg] border-[#0e0e10] bg-[#0e0e10] shadow-none transition-transform duration-500 group-hover:visible group-hover:flex group-hover:translate-x-[0.3em] group-hover:-translate-y-[0.95em]"></div>
                  </div>
                </div>
              </Transition>
              <div className="flex w-full flex-col items-center justify-center pt-0 leading-none">
                <div className="">{textTruncate(category.name, 15)}</div>
                <div>
                  {category.views} {category.views == 1 ? "viewer" : "viewers"}
                </div>
                <div className="flex w-full justify-around">
                  {category.category.map((item: any, index) => (
                    <p key={`category-${index}`} className=" text-xs ">
                      {item}
                    </p>
                  ))}
                </div>
              </div>
            </div>
          );
        }
      })}
    </>
  );
};

export default CategoryCardTwo;