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

import React 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 }) {
  if (!node) {
    return <div className="detail" />;
  }

  const { id, data } = node;
  const index = id + 1;
  return (
    <div className={visible ? "detail visible" : "detail"}>
      <div className="content">
        <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 />
        ) : data.type === "video" ? (
          visible && (
            <div className="video">
              <Vimeo
                video={data.images[0].uri.replace("player.", "")}
                autoplay
                loop
                showByline={false}
                showPortrait={false}
                showTitle={false}
              />
            </div>
          )
        ) : (
          <Gallery images={data.images} visible={visible} />
        )}
      </div>
    </div>
  );
}