/* eslint-disable */
// @ts-ignore
import clsx from "clsx";

import Media from "@/components/media";
import { unwrapArray } from "@/helpers/array";
import type { MediaCardBlock } from "@/types";

import styles from "./styles.module.scss";
import { MouseEventHandler, useRef } from "react";

type MediaCardProps = MediaCardBlock;
interface MediaCarouselCardProps extends MediaCardProps {
  carousel?: boolean;
  active?: boolean;
  index?: number;
  onClick?: any;
  style?: React.CSSProperties;
}

export default function MediaCard({
  caption,
  mediaSource,
  carousel = false,
  active = true,
  index,
  onClick,
  style,
}: MediaCarouselCardProps) {
  const media = unwrapArray(mediaSource);

  const ref = useRef(null);

  function onClickHandler(e: React.MouseEvent<HTMLDivElement>) {
    //console.log( e );
    if (active) return;
    e.preventDefault();
    if (onClick) onClick(ref.current);
  }

  return (
    <div
      ref={ref}
      className={clsx(styles.mediaCard, active ? styles.active : undefined)}
      onClick={onClickHandler}
    >
      <Media
        mediaSource={media}
        parallax={false}
        carousel={carousel}
        active={active}
        index={index}
        style={style}
      />
      {caption && (
        <p
          className={styles.caption}
          dangerouslySetInnerHTML={{ __html: caption || "" }}
        ></p>
      )}
    </div>
  );
}