import React, { useEffect, useState } from "react";
import ContentCard from "../cards/contentCard";
import { simStreamers } from "../../utils/helpers/streamer";
import classNames from "../../utils/helpers/className";
import ShowMoreButton from "../buttons/showMore";

const SuggestedStreamers = ({
  newExpand,
  mobile,
}: {
  mobile?: boolean;
  newExpand: boolean;
}) => {
  const [showNumber, setShowNumber] = useState(false);
  const [width, setWidth] = useState<number | undefined>(0);
  const [cardNumber, setCardNumber] = useState(12);
  const [expand, setExpand] = useState(false);
  const handleExpand = (e: any) => {
    console.log("expand categories", window.innerWidth);
    window.innerWidth > 1920
      ? setCardNumber(14)
      : window.innerWidth > 1569
      ? setCardNumber(12)
      : window.innerWidth > 1280
      ? setCardNumber(10)
      : window.innerWidth > 1024
      ? setCardNumber(8)
      : window.innerWidth > 768
      ? setCardNumber(6)
      : setCardNumber(4);
    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 streamerCount =
    mobile == true ? simStreamers.length : !showNumber ? 12 : cardNumber;
  return (
    <div
      className={classNames(
        mobile
          ? "flex-col "
          : newExpand
          ? "flex-col px-10 pt-10 pl-[13.438rem]"
          : "flex-col pl-[2.2rem] ",
        "z-10 flex min-h-[20%] w-full items-start justify-start  "
      )}
    >
      <div
        className={classNames(
          mobile ? " text-[1rem]" : "pl-6 text-lg text-[0.95rem] font-bold",
          "   font-medium  text-white xl:text-base"
        )}
      >
        <button
          className={classNames(
            mobile ? "pl-2 text-[1rem]" : "text-[1.0rem] lg:text-[0.95rem]",
            "font-bold text-violet-400 "
          )}
        >
          Live channels
        </button>{" "}
        we think you&apos;ll like
      </div>
      <div
        className={classNames(
          mobile
            ? "overflow-x-auto pl-2 pt-5 pr-10"
            : "flex-wrap overflow-hidden px-6 pt-4",
          "flex h-auto w-full grow gap-2    pb-5"
        )}
      >
        {simStreamers.map((streamer, index) => {
          if (index < streamerCount) {
            return (
              <div
                key={`streamer-${index}`}
                className={classNames(
                  mobile ? "h-auto w-full" : expand ? "flex-0" : "flex-1",
                  index == 2 && expand == false && mobile == false
                    ? "max-md:hidden  md:flex"
                    : index == 3 && expand == false && mobile == false
                    ? "max-lg:hidden  lg:flex"
                    : index == 4 && expand == false && mobile == false
                    ? "max-2xl:hidden xl:flex"
                    : index == 5 && expand == false && mobile == false
                    ? "max-2xl:hidden "
                    : index > 5 && expand == false && mobile == false
                    ? "hidden"
                    : "",
                  "flex h-auto sm:w-[48.2%] md:w-[32.2%] lg:w-[23.8%]"
                )}
              >
                <ContentCard profile={streamer} mobile={mobile} />
              </div>
            );
          }
          return null;
        })}
      </div>
      <div className={classNames(mobile ? "hidden" : "block", "h-auto w-full")}>
        {expand ? null : (
          <ShowMoreButton
            handleExpand={handleExpand}
            expand={expand}
            hidden={true}
          />
        )}
      </div>
    </div>
  );
};

export default SuggestedStreamers;