import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

import closeImg from './assets/close.png';
import nextImg from './assets/next.png';
import prevImg from './assets/prev.png';
import { FullImg } from './styled';

interface ImgPreviewProps {
  img: string;
  imgArray?: string[];
}

function getParentNode() {
  return document.getElementById('dashboard') || document.body;
}

const ImgPreview = (props: ImgPreviewProps) => {
  const { img, imgArray = [] } = props;
  const hasMultiImg = imgArray?.length;
  const [currentImg, setCurrentImg] = useState(img);

  useEffect(() => {
    setCurrentImg(img);
  }, [img]);

  function handleClose() {
    const parent = getParentNode();
    const child = document.getElementById('imgModal');
    if (parent && child) {
      parent.removeChild(child);
    }
  }

  function handlePrevClick() {
    const currentIndex = imgArray.indexOf(currentImg);
    const len = imgArray.length;
    if (currentIndex - 1 < 0) {
      setCurrentImg(imgArray[len - 1]);
    } else {
      setCurrentImg(imgArray[currentIndex - 1]);
    }
  }

  function handleNextClick() {
    const currentIndex = imgArray.indexOf(currentImg);
    const len = imgArray.length;
    if (currentIndex + 1 >= len) {
      setCurrentImg(imgArray[0]);
    } else {
      setCurrentImg(imgArray[currentIndex + 1]);
    }
  }

  return (
    <FullImg>
      <img src={currentImg} />
      {hasMultiImg ? (
        <img src={prevImg} onClick={handlePrevClick} className="switch prev" />
      ) : null}
      {hasMultiImg ? (
        <img src={nextImg} onClick={handleNextClick} className="switch next" />
      ) : null}
      <div className="close" onClick={handleClose}>
        <img src={closeImg} />
      </div>
    </FullImg>
  );
};

export default ImgPreview;

export const handleFullScreen = (img: string, imgArray: string[]) => {
  const c = document.createElement('div');
  c.id = 'imgModal';
  const root = getParentNode();
  root.appendChild(c);
  ReactDOM.render(
    <ImgPreview img={img} imgArray={imgArray} />,
    document.getElementById('imgModal'),
  );
};