import React, { useState } from 'react';

function Gallery({ data }) {
  const [showInLightbox, setInLightbox] = useState(0);
  const [openLightbox, setOpenLightbox] = useState(0);

  const ImagesData = data;

  const numbersImages = ImagesData.length;
  let imageInit = 0;

  let prevdata = 0;
  let prev = 0;
  let nextdata = 0;
  let next = 0;
  const addIndice = myindice => {
    console.log(myindice);
    imageInit = myindice;
    prevdata = imageInit - 1;
    prev = prevdata < 0 ? numbersImages - 1 : prevdata;
    nextdata = imageInit + 1;
    next = nextdata >= numbersImages ? 0 : nextdata;
    console.log('numbersImages', numbersImages);
    console.log('imageInit', imageInit);
    console.log('prev', prev);
    console.log('next', next);
  };

  const controlsLightboxPrev = () => {
    console.log('test click controls prev');
  };
  const controlsLightboxNext = () => {
    console.log('next viene con', next);

    setTimeout(function() {
      next = next + 1 >= numbersImages ? 0 : next;
      console.log('next desde stimeout', next);
    }, 100);
  };

  return (
    <div className="gallery">
      {ImagesData.map((img, i) => (
        <figure key={i} onClick={() => (addIndice(i), setInLightbox(i), setOpenLightbox(1))}>
          <img src={img.image} width="392" height="190" alt="" />
          <figcaption>{img.caption}</figcaption>
        </figure>
      ))}
      <div className={`wrap-lightbox ${openLightbox === 1 && 'active'}`}>
        <div className="close-lightbox" onClick={() => setOpenLightbox(0)}>
          <img src="/static/iconos/close-w.svg" width="20" alt="" />
        </div>
        <span className="lightbox-next" onClick={() => (controlsLightboxNext(), setInLightbox(next))}>
          <img src="/static/iconos/arrow-next.svg" width="40" alt="" />
        </span>
        <span className="lightbox-prev" onClick={() => (setInLightbox(prev), controlsLightboxPrev())}>
          <img src="/static/iconos/arrow-prev.svg" width="40" alt="" />
        </span>

        <div className="list-lightbox">
          {ImagesData.map((img, i) => (
            <div key={i} className={`item-lightbox ${showInLightbox === i && 'active'}`}>
              <img src={img.image} width="392" height="190" alt="" />
              <figcaption>{img.caption}</figcaption>
            </div>
          ))}
        </div>
      </div>
      <style jsx>
        {`
          .gallery {
            figure {
              cursor: pointer;
              transition: all 0.3s;
              margin-bottom: 20px;
              &:last-child {
                margin-bottom: 0;
              }
              &:hover {
                opacity: 0.8;
              }
              @media screen and (max-width: 640px) {
                width: 100%;
                img {
                  width: 100%;
                }
              }
            }
            figcaption {
              font-size: 12px;
              margin-top: 10px;
              color: rgba(54, 54, 54, 0.6);
              @media screen and (max-width: 480px) {
                display: none;
              }
            }
          }
          .wrap-lightbox {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1200;
            height: 0;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
            &.active {
              height: 100vh;
              opacity: 1;
              visibility: visible;
            }
            .close-lightbox {
              width: 40px;
              height: 40px;
              border-radius: 100%;
              background-color: #000;
              position: absolute;
              top: 10px;
              right: 10px;
              font-size: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.3s;
              cursor: pointer;
              &:hover {
                opacity: 0.5;
              }
            }
            .item-lightbox {
              position: absolute;
              top: 0;
              bottom: 0;
              margin: auto 0;
              left: 0;
              height: 85vh;
              width: 100%;
              text-align: center;
              z-index: 1;
              opacity: 0;
              visibility: hidden;
              transition: all 0.5s;
              &.active {
                opacity: 1;
                visibility: visible;
              }

              img {
                height: 100%;
                width: auto;
              }
              figcaption {
                font-size: 16px;
                color: #fff;
              }
            }
            .lightbox-next,
            .lightbox-prev {
              position: absolute;
              top: 0;
              bottom: 0;
              margin: auto 0;
              width: 40px;
              height: 40px;
              background-color: #fff;
              border-radius: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 2;
              transition: all 0.3s;
              cursor: pointer;
              &:hover {
                opacity: 0.5;
              }
            }
            .lightbox-next {
              right: 10px;
            }
            .lightbox-prev {
              left: 10px;
            }
          }
        `}
      </style>
    </div>
  );
}

export default Gallery;