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

import React from "react";

import Gallery from "./Gallery.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>
        {node.type === "video" ? (
          "video"
        ) : (
          <Gallery images={data.images} visible={visible} />
        )}
      </div>
    </div>
  );
}

const pad = (value) => (value < 10 ? "0" + value : value);
const capitalizeWord = (text = "") =>
  text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
const capitalize = (text = "") =>
  String(text || "")
    .split(" ")
    .map(capitalizeWord)
    .join(" ");