import React, { useEffect, useState } from "react";
import Image from "next/legacy/image";
import categories from "../../../../gameCategories.json";
import { textTruncate } from "../../../utils/helpers/shortenString";
// import { useWindowSize } from "../../../utils/hooks/useWindowSize";
import classNames from "../../../utils/helpers/className";
import ShowMoreButton from "../../buttons/showMore";
// import { simStreamers } from "../../../utils/helpers/streamer";
const CategoryCards = ({
  newExpand,
  mobile,
  mobilePage,
}: {
  mobilePage?: boolean;
  mobile?: boolean;
  newExpand: any;
}) => {
  //   const [width, height] = useWindowSize(); const [rowCount, setRowCount] = useState(0); const [expand, setExpand] = useState(false);
  const [showNumber, setShowNumber] = useState(false);
  const [width, setWidth] = useState<number | undefined>(0);
  const [expand, setExpand] = useState(false);
  const handleExpand = (e: any) => {
    console.log("expand categories", expand);
    setExpand(true);
  };
  useEffect(() => {
    if (expand) {
      setShowNumber(true);
    }
  }, [expand]);
  useEffect(() => {
    if (typeof window !== undefined) {
      console.log("resize effect");
      const handleResize = () => {
        setWidth(window.innerWidth);
      };
      window.addEventListener("resize", handleResize);

      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  });
  const categoryCount =
    mobile == true ? categories.length : !showNumber ? 12 : categories.length;
  return (
    <div
      className={classNames(
        mobilePage
          ? "w-full"
          : mobile
          ? "h-[18rem] w-full overflow-x-auto p-0 pl-2"
          : newExpand
          ? "min-h-[23%] px-10 pl-[13.438rem]"
          : !expand
          ? "min-h-[20%] px-10 pl-[2.2rem] md:max-lg:max-h-[19.0rem] lg:min-h-[23%] xl:max-2xl:max-h-[20.0rem]"
          : "min-h-[23%] px-10 pl-[2.2rem] lg:min-h-[20%]",
        "flex  w-full flex-1  flex-col items-start justify-start pt-1"
      )}
    >
      <div
        className={classNames(
          mobile ? "" : mobilePage ? "pl-4" : "pl-6",
          "flex w-full items-start justify-start  pb-3"
        )}
      >
        <div className={classNames(mobile ? "" : "", "text-base")}>
          {mobilePage ? (
            <a>Browse</a>
          ) : (
            <div className="pl-0 text-lg font-medium">
              <button className="text-lg font-bold text-violet-400">
                Categories
              </button>{" "}
              we think you&apos;ll like
            </div>
          )}
        </div>
      </div>
      <div
        className={classNames(
          mobile
            ? "flex grow flex-row overflow-visible"
            : !mobilePage
            ? "flex flex-1 flex-wrap pt-2 sm:pl-6"
            : "flex flex-1 flex-wrap pt-2 pl-4",
          "w-full gap-2 pb-5"
        )}
      >
        {categories.map((category, index) => {
          if (index < categoryCount) {
            return (
              <div
                key={`categories-${index}`}
                role="button"
                // 4xl: all 12, 3xl:
                className={classNames(
                  mobile
                    ? "flex h-full min-w-[13vw] flex-1 flex-col"
                    : index == 4 && expand == false && mobile == false
                    ? "hidden md:block"
                    : index == 5 && expand == false && mobile == false
                    ? "hidden md:block"
                    : index == 6 && expand == false && mobile == false
                    ? "hidden lg:block"
                    : index == 7 && expand == false && mobile == false
                    ? "hidden lg:block"
                    : index == 8 && expand == false && mobile == false
                    ? "hidden xl:block"
                    : index == 9 && expand == false && mobile == false
                    ? "hidden xl:block"
                    : index == 10 && expand == false && mobile == false
                    ? "hidden 2xl:block"
                    : index == 11 && expand == false && mobile == false
                    ? "hidden 2xl:block"
                    : expand == true
                    ? "w-[11%]"
                    : "",
                  "wrap group flex w-[23.5%] flex-initial sm:w-[23.8%] md:w-[15.6%] lg:w-[11.666667%] xl:w-[9.28834%] 2xl:w-[7.7833%]"
                )}
              >
                <div className="flex   h-full flex-1 flex-col group-hover:justify-between group-focus:justify-between">
                  <div className="relative flex flex-1 flex-col bg-transparent group-hover:z-20 ">
                    <div className="absolute -top-[0.40em] -left-[0.330em] z-50 m-auto hidden h-[0.70rem] w-[0.70rem]  rotate-[50.0deg] bg-[#0e0e10]   opacity-0  group-hover:flex group-hover:translate-x-[0.252em] group-hover:-translate-y-[0.95em]  group-hover:opacity-100 group-hover:transition-transform"></div>
                    <div className="flex w-full flex-1 flex-col bg-transparent transition-transform duration-300  group-hover:absolute group-hover:translate-x-[0.2em] group-hover:-translate-y-4 group-hover:border-l-8 group-hover:border-b-8 group-hover:border-b-violet-500 group-hover:border-l-violet-500">
                      <Image
                        src={`/gameCovers/${category.name
                          .toLowerCase()
                          .replaceAll(" ", "")
                          .replace(/[^a-zA-Z0-9 ]/g, "")}.jpg`}
                        alt="category image"
                        className={classNames(
                          mobile
                            ? "w-full flex-1"
                            : expand == true
                            ? "w-[3rem]"
                            : "",
                          "flex flex-1"
                        )}
                        layout="responsive"
                        width={50}
                        height={65}
                      />
                    </div>
                    <div className=" invisible absolute bottom-[0.16em] -right-[0.00em] z-20 m-auto h-[0.473rem]  w-[0.473rem] -rotate-[90deg] border-transparent bg-gradient-to-tr from-[rgba(14,14,16,1)_50%] to-[rgba(139,92,246,1)_50%] shadow-none transition-transform duration-300 group-hover:visible group-hover:flex group-hover:translate-x-[0.252em] group-hover:-translate-y-[0.95em]"></div>
                    {index == 4 && expand == false && (
                      <div className="hidden w-full bg-black md:flex "></div>
                    )}
                  </div>
                  <div className="">
                    {/* need to add more btn */}
                    <div className="whitespace-nowrap text-[0.65rem] sm:text-[0.85rem]">
                      {textTruncate(category.name, 15)}
                    </div>
                    <div className="text-[0.6rem] sm:text-[0.8rem]">
                      {category.views}{" "}
                      {category.views == 1 ? "viewer" : "viewers"}
                    </div>
                    <div className="flex shrink justify-around">
                      {category.category.map((item, index) => (
                        <div
                          key={`categoryS-${index}`}
                          className="flex h-[1rem] flex-col items-center justify-center rounded-full border-gray-300 bg-[#1f1f23] text-xs text-gray-500"
                        >
                          <a className="whitespace-nowrap px-2 text-[0.35rem] sm:text-[0.45rem] xl:text-[0.55rem]">
                            {item}
                          </a>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            );
          }
          return null;
        })}
      </div>
      <div
        className={classNames(mobile ? "hidden" : "block h-auto w-full", "")}
      >
        {expand ? null : (
          <ShowMoreButton handleExpand={handleExpand} expand={expand} />
        )}
      </div>
    </div>
  );
};

export default CategoryCards;