import { useRef } from "react";
import clsx from "clsx";
import { m } from "framer-motion";

import Image from "@/components/image";
import Video from "@/components/video";
import { unwrapArray } from "@/helpers/array";
import { getMediaType } from "@/helpers/media";
import { useParallax } from "@/hooks";
import type { MediaSourceRecord, VideoOption } from "@/types";

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

interface MediaProps {
  mediaSource: MediaSourceRecord;
  parallax?: boolean;
  carousel?: boolean;
  active?: boolean;
  index?: number;
  className?: string;
  style?: React.CSSProperties;
}

export default function Media({
  mediaSource,
  parallax = true,
  carousel = false,
  active = true,
  index,
  className,
  style,
}: MediaProps) {
  const mediaRef = useRef(null);

  const media = unwrapArray(mediaSource);
  const mediaType = getMediaType(media);

  //const y = useParallax(mediaRef, "15%");
  //const style = parallax && mediaType !== "extVideo" ? { y } : {};

  if (!media || !mediaType) return null;

  return (
    <div
      id={`media-${media.id}`}
      className={clsx(styles.media, className)}
      ref={mediaRef}
    >
      <m.div className={styles.mediaWrapper}>
        {mediaType === "image" && media.asset && (
          <Image
            image={media.asset}
            link={media.externalLink || null}
            layout="fill"
          />
        )}
        {mediaType === "fileVideo" && media.asset && (
          <Video
            video={media.asset}
            type={mediaType}
            options={(media.videoOptions as VideoOption[]) ?? undefined}
            active={active}
            carousel={carousel}
            index={index}
            download={media.download}
            link={media.externalLink || null}
            style={style}
          />
        )}
        {mediaType === "extVideo" && media.externalVideo && (
          <Video
            video={media.externalVideo}
            type={mediaType}
            options={(media.videoOptions as VideoOption[]) ?? undefined}
            active={active}
            carousel={carousel}
            index={index}
            download={media.download}
            link={media.externalLink || null}
            style={style}
          />
        )}
      </m.div>
    </div>
  );
}