import { useState } from "react";
import { StackedCarouselTwo } from "../../utils/homeSlide2";
import ProfileButtonXl from "../buttons/profileButtonXl";
// import { StackedCarousel } from "../../utils/homeSlide2";

export const CarouselTwo = () => {
  const [cardState, setCardState] = useState(0);
  const handleCardChange = (newCard: number) => {
    //console.log("new card", newCard, `card: ${cardState}`);
    if (newCard == cardState) return;
    setCardState(newCard);
  };
  const VideoComponent = ({ id }: { id: number }) => {
    console.log("loading video comonent:", id, `cardState = ${cardState}`);
    if (cardState == id) {
      return (
        <div className="flex w-[100%] items-center justify-center ">
          <div className="flex w-[95%] items-center justify-center gap-0 2xs:max-sm:w-full">
            <video
              autoPlay
              title={`moon1`}
              id={`1`}
              muted
              loop
              className=" h-[15rem] w-auto object-cover shadow-2xl"
              src={`/videos/s${id}.mp4`}
            ></video>
            <div className="hidden h-[15rem] w-[11rem] bg-[#18181b] sm:flex">
              <div className="flex  flex-col">
                <div className="flex h-[27%] w-full">
                  <div className="flex flex-col items-center justify-center">
                    {/* <div>profile pic</div> */}
                    <div className="flex h-[3.5rem] pl-2 pt-3 text-slate-200 ">
                      <ProfileButtonXl />
                    </div>
                  </div>
                  <div className="flex flex-col pt-2 pl-[0.35rem]">
                    <a className="pl-1 pt-[0.15rem] text-[0.7rem] font-bold text-violet-400 max-md:leading-4 md:text-sm">
                      streamer name
                    </a>
                    <a className="pl-1 text-[0.7rem] text-violet-500 max-md:leading-4 md:text-xs">
                      game played
                    </a>
                    <a className="pl-1 pt-[0.15rem] text-xs text-white">
                      &quot;viewers&quot;
                    </a>
                  </div>
                </div>
                <div className="flex justify-around pt-1 ">
                  <div className="flex h-[1rem] flex-col items-center justify-center rounded-full border-gray-300 bg-[#1f1f23] text-xs text-gray-500">
                    <a className="px-2 text-[0.55rem]">tag1</a>
                  </div>
                  <div className="flex h-[1rem] flex-col items-center justify-center rounded-full border-gray-300 bg-[#1f1f23] text-xs text-gray-500">
                    <a className="px-2 text-[0.55rem]">tag2</a>
                  </div>
                </div>
                <div className="h-[65%]">
                  <p className=" px-3 pb-1 pt-4 text-xs">
                    This is going to be a long paragraph section. In this
                    section, we will look at ways to describe how the streamer
                    wants to convey their stream to their viewers.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="flex">
        <video
          title={`moon1`}
          id={`1`}
          muted
          loop
          className="h-[15rem] object-cover "
          src={`/videos/s${id}.mp4`}
        ></video>
        <div className="absolute hidden h-[15rem] w-[10.75rem] translate-x-[35.5rem] bg-gray-600">
          this is content
        </div>
      </div>
    );
  };

  interface ITab {
    currentIndex: number;
  }
  const onCardChange = (event: ITab) => {
    //console.log("Card", event);
    //console.log("newCurr indx:", event.currentIndex);
    handleCardChange(event.currentIndex);
    // setCard(event.currentIndex);
  };

  return (
    <div className="relative flex min-h-full w-full grow  justify-end">
      <StackedCarouselTwo
        autoRotate={false}
        onCardChange={onCardChange}
        containerClassName={"container"}
        cardClassName="card"
        leftButton={
          <button className=" absolute rounded-sm max-md:bg-[#1e1e1f] max-md:px-2 max-md:py-0 max-md:shadow-md">
            {"<"}
          </button>
        }
        rightButton={
          <button className=" absolute rounded-sm max-md:bg-[#1e1e1f] max-md:px-2 max-md:py-0 max-md:shadow-md">
            {">"}
          </button>
        }
        showSummary={false}
        style={{
          width: "100%",
          //height: "100%",
          display: "flex",
        }}
        rotationInterval={2000}
        //handleCardChange={handleCardChange}
      >
        <div
          key={"child1"}
          className="flex w-full flex-col items-center justify-center "
        >
          <VideoComponent id={0} />
        </div>
        <div
          key={"child2"}
          className="flex w-full flex-col items-center justify-center "
        >
          <VideoComponent id={1} />
        </div>
        <div
          key={"child3"}
          className="flex w-full flex-col items-center justify-center "
        >
          <VideoComponent id={2} />
        </div>
        <div
          key={"child4"}
          className="flex w-full flex-col items-center justify-center "
        >
          <VideoComponent id={3} />
        </div>
        <div
          key={"child4"}
          className="flex w-full flex-col items-center justify-center "
        >
          <VideoComponent id={1} />
        </div>
        <div
          key={"child4"}
          className="flex w-full flex-col items-center justify-center "
        >
          <VideoComponent id={3} />
        </div>
      </StackedCarouselTwo>
    </div>
  );
};