/**
 * Detail view, displaying text plus media
 */

import React, { useRef, useEffect, useState, useCallback } from "react";

import Gallery from "./Gallery.js";
import Clocks from "./Clocks.js";
import Vimeo from "@u-wave/react-vimeo";
import { pad } from "../utils/index.js";

export default function Detail({ node, visible, onClose }) {
  const ref = useRef();
  const contentRef = useRef();
  const [videoReady, setVideoReady] = useState(false);

  useEffect(() => {
    if (!node) {
      setVideoReady(false);
    }
    setTimeout(() => {
      ref.current.scrollTo(0, -ref.current.scrollHeight);
      if (contentRef.current) {
        contentRef.current.scrollTo(0, -ref.current.scrollHeight);
      }
    }, 10);
  }, [node]);

  const handleVideoReady = useCallback(() => {
    if (node.data.object) {
      setTimeout(() => {
        setVideoReady(true);
      }, 500);
    } else {
      setVideoReady(true);
    }
  }, [node]);

  const handleLoad = useCallback(() => {
    ref.current.scrollTo(0, -ref.current.scrollHeight);
  });

  if (!node) {
    return <div className="detail" ref={ref} />;
  }

  const { id, data } = node;
  const index = id + 1;
  return (
    <div className={visible ? "detail visible" : "detail"} ref={ref}>
      <div className="content" ref={contentRef}>
        <div>
          <div className="title">
            <div className="index">{pad(index)}</div>
            {data.author && (
              <div dangerouslySetInnerHTML={{ __html: data.author }} />
            )}
            <div dangerouslySetInnerHTML={{ __html: data.title }} />
          </div>
          <div
            className="citation"
            dangerouslySetInnerHTML={{ __html: data.citation }}
          />
          <div
            className="description"
            dangerouslySetInnerHTML={{ __html: data.description }}
          />
        </div>
      </div>
      <div className="media">
        <div className="buttons close">
          <img src="assets/img/close.svg" onClick={onClose} />
        </div>
        {index === 33 ? (
          <Clocks onLoad={handleLoad} />
        ) : data.type === "video" ? (
          visible && (
            <div className={videoReady ? "video ready" : "video"}>
              <Vimeo
                video={data.images[0].uri.replace("player.", "")}
                autoplay
                loop
                showByline={false}
                showPortrait={false}
                showTitle={false}
                onReady={handleVideoReady}
              />
            </div>
          )
        ) : (
          <Gallery images={data.images} visible={visible} onLoad={handleLoad} />
        )}
      </div>
    </div>
  );
}