import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import {
  ArrowsPointingOutIcon,
  ArrowsPointingInIcon,
} from "@heroicons/react/24/outline";
import { useAniList } from "../../../lib/anilist/useAnilist";

export default function ThirdPanel({
  aniId,
  data,
  hasRun,
  currentId,
  currentChapter,
  seekPage,
  setSeekPage,
  visible,
  setVisible,
  session,
  scaleImg,
  setMobileVisible,
  mobileVisible,
}) {
  const [index, setIndex] = useState(0);
  const [image, setImage] = useState(null);
  const { markProgress } = useAniList(session);

  useEffect(() => {
    setIndex(0);
    setSeekPage(0);
  }, [data, currentId]);

  const seekToIndex = (newIndex) => {
    if (newIndex >= 0 && newIndex < data.length) {
      setIndex(newIndex);
      setSeekPage(newIndex);
    }
  };

  useEffect(() => {
    seekToIndex(seekPage);
  }, [seekPage]);

  useEffect(() => {
    if (data && Array.isArray(data) && data?.length > 0) {
      setImage([...data].reverse()); // Create a copy of data before reversing
    }
  }, [data]);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "ArrowRight") {
        if (index > 0) {
          setIndex(index - 1);
          setSeekPage(index - 1);
        }
      } else if (event.key === "ArrowLeft") {
        if (index < image.length - 1) {
          setIndex(index + 1);
          setSeekPage(index + 1);
        }
        if (index + 1 >= image.length - 2 && !hasRun.current) {
          let chapterNumber = currentChapter?.number;
          if (chapterNumber % 1 !== 0) {
            // If it's a decimal, round it
            chapterNumber = Math.round(chapterNumber);
          }

          markProgress(aniId, chapterNumber);
          hasRun.current = true;
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [index, image]);

  const handleNext = () => {
    if (index < image.length - 1) {
      setIndex(index + 1);
      setSeekPage(index + 1);
    }
    if (index + 1 >= image.length - 2 && !hasRun.current) {
      let chapterNumber = currentChapter?.number;
      if (chapterNumber % 1 !== 0) {
        // If it's a decimal, round it
        chapterNumber = Math.round(chapterNumber);
      }

      markProgress(aniId, chapterNumber);
      hasRun.current = true;
    }
  };

  const handlePrev = () => {
    if (index > 0) {
      setIndex(index - 1);
      setSeekPage(index - 1);
    }
  };

  return (
    <div className="flex-grow h-screen">
      <div className="flex items-center w-full relative group">
        {image && Array.isArray(image) && image?.length > 0 ? (
          <>
            <div
              className={`flex w-full justify-center items-center lg:scrollbar-thin scrollbar-thumb-txt scrollbar-thumb-rounded-sm overflow-x-hidden`}
            >
              <Image
                key={image[image.length - index - 1]?.url}
                width={500}
                height={500}
                className="w-full h-screen object-contain"
                onClick={() => setMobileVisible(!mobileVisible)}
                src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
                  image[image.length - index - 1]?.url
                )}&headers=${encodeURIComponent(
                  JSON.stringify({
                    Referer: image[image.length - index - 1]?.headers.Referer,
                  })
                )}`}
                alt="Manga Page"
                style={{
                  transform: `scale(${scaleImg})`,
                  transformOrigin: "top",
                }}
              />
            </div>
            <div className="absolute w-full hidden group-hover:flex justify-between mt-4">
              <button
                className="px-4 py-2 bg-secondary text-white rounded-r"
                onClick={handleNext}
              >
                Next
              </button>
              <button
                className="px-4 py-2 bg-secondary text-white rounded-l"
                onClick={handlePrev}
              >
                Previous
              </button>
            </div>
          </>
        ) : (
          <div className="w-full flex-center h-full">
            {data.error || "Not found"} :(
          </div>
        )}
        <span className="absolute hidden group-hover:flex bottom-5 left-5 bg-secondary p-2">
          {visible ? (
            <button type="button" onClick={() => setVisible(!visible)}>
              <ArrowsPointingOutIcon className="w-5 h-5" />
            </button>
          ) : (
            <button type="button" onClick={() => setVisible(!visible)}>
              <ArrowsPointingInIcon className="w-5 h-5" />
            </button>
          )}
        </span>
        <span className="absolute hidden group-hover:flex bottom-5 right-5 bg-secondary p-2">
          Page {index + 1}/{data.length}
        </span>
      </div>
    </div>
  );
}