/* eslint-disable */
// @ts-ignore
import { useRef, useState } from "react";
import { m, useMotionValueEvent, useScroll } from "framer-motion";

import MediaCard from "@/components/blocks/media-card";
import type { MediaCarouselBlock } from "@/types";

import styles from "./styles.module.scss";

type MediaCarouselProps = MediaCarouselBlock;

export default function MediaCarousel({ carouselContent }: MediaCarouselProps) {
  if (!carouselContent || carouselContent.length < 1) return null;

  const carouselRef = useRef<HTMLDivElement>(null);
  const numElements = carouselContent.length;
  const percentElement = 1 / (numElements - 1);
  const [selectedItem, setSelectedItem] = useState<number>(0);
  let selectedIndex = 0;

  const { scrollXProgress } = useScroll({
    container: carouselRef,
  });
  useMotionValueEvent(scrollXProgress, "change", (x) => {
    selectedIndex = Math.round(x / percentElement);
    if (selectedIndex !== selectedItem) {
      //console.log( selectedIndex );
      setSelectedItem(selectedIndex);
    }
  });

  function clickCardHandler(mediaCard: HTMLDivElement) {
    let paddingLeft: any = mediaCard.parentElement
      ? window
          .getComputedStyle(mediaCard.parentElement, null)
          .getPropertyValue("padding-left")
      : 0;
    paddingLeft = parseInt(paddingLeft);

    carouselRef.current?.scrollTo({
      left: mediaCard?.offsetLeft - paddingLeft - mediaCard?.offsetWidth * 0.5,
      behavior: "smooth",
    });
  }

  return (
    <m.div ref={carouselRef} className={styles.mediaCarousel}>
      {carouselContent.map((mediaCard, index) => (
        <MediaCard
          key={mediaCard.id}
          {...mediaCard}
          carousel={true}
          active={index === selectedItem}
          index={index}
          onClick={clickCardHandler}
          style={{ maxHeight: "90vh" }}
        />
      ))}
    </m.div>
  );
}