import React, { useState, useEffect, useRef } from "react";
import { useParams } from "react-router";
import { useStoreState, useStoreActions } from "easy-peasy";
import { setDoc } from "firebase/firestore";
import BiggerImageModal from "../components/modals/BiggerImageModal";
import "./snippetPartDetailedPage.css";
import { getDownloadURL, ref } from "firebase/storage";
import { storage } from "../firebase/fireInit";

const SnippetPartDetailedPage = ({ from }) => {
  const { spid } = useParams();
  const [item, setItem] = useState(null);
  const [modalOpen, setModalOpen] = useState(false);
  const image = useRef();
  const { characters, locations, items, events } = useStoreState(
    (store) => store
  );

  useEffect(() => {
    if (item != null) {
      if (item.storageUrl != "" && item.storageUrl != null) {
        getDownloadURL(ref(storage, item.storageUrl)).then((url) => {
          image.current.setAttribute("src", url);
        });
      } else {
        image.current.setAttribute(
          "src",
          "/images/drawable/icon_description.png"
        );
      }
    }
  }, [image, item]);

  useEffect(() => {
    var foundItem = null;
    switch (from) {
      case "Characters":
        foundItem = characters.find((i) => i.id == spid);
        break;
      case "Locations":
        foundItem = locations.find((i) => i.id == spid);
        break;
      case "Items":
        foundItem = items.find((i) => i.id == spid);
        break;
      case "Events":
        foundItem = events.find((i) => i.id == spid);
        break;
    }
    setItem(foundItem);
  });

  return (
    <div className="detailedContainer">
      <div className="imageNameDiv">
        <img
          className="detailedImage"
          id="portrait"
          ref={image}
          src={"/images/drawable/icon_description.png"}
          onClick={() => setModalOpen(true)}
        />
        <div className="detailedName">{item ? item.name : ""}</div>
      </div>
      {modalOpen && (
        <BiggerImageModal
          storageUrl={item ? item.storageUrl : ""}
          setModalOpen={setModalOpen}
          item={item}
          type={item.type}
          detailedImage={image}
        />
      )}
    </div>
  );
};

export default SnippetPartDetailedPage;