/**
 * Image gallery
 */

import React, { useState, useEffect } from "react";
import { mod } from "../utils/index.js";

export default function Gallery({ images, visible }) {
  const hasItems = !!images?.length;
  const oneItem = images?.length === 1;

  const [index, setIndex] = useState(0);
  const [opacity, setOpacity] = useState(0);
  useEffect(() => {
    setIndex(0);
    setOpacity(0);
    setTimeout(() => setOpacity(1), 500);
  }, [images]);

  function previous() {
    setOpacity(0);
    setTimeout(() => setIndex(mod(index - 1, images.length)), 200);
    // setTimeout(() => setOpacity(1), 500);
  }
  function next() {
    setOpacity(0);
    setTimeout(() => setIndex(mod(index + 1, images.length)), 200);
    // setTimeout(() => setOpacity(1), 500);
  }
  function nextOrWrap() {
    if (oneItem) return;
    setOpacity(0);
    setTimeout(() => setIndex(mod(index + 1, images.length)), 200);
    // setTimeout(() => setOpacity(1), 500);
  }
  function appear() {
    setOpacity(1);
  }

  if (!hasItems) {
    return <div className="gallery" style={{ opacity: 0 }} />;
  }

  return (
    <div className="gallery" style={{ opacity: visible ? 1 : 0 }}>
      <div className="image">
        {visible && !!images[index] && (
          <img
            src={images[index].uri}
            onClick={nextOrWrap}
            onLoad={appear}
            style={{ opacity }}
          />
        )}
      </div>
      <div className="buttons">
        {!oneItem && (
          <img
            src="/assets/img/arrow-back.svg"
            onClick={previous}
            style={{ opacity: index > 0 ? 1 : 0 }}
          />
        )}
        {!oneItem && (
          <img
            src="/assets/img/arrow-forward.svg"
            onClick={next}
            style={{ opacity: index < images.length - 1 ? 1 : 0 }}
          />
        )}
      </div>
    </div>
  );
}