import React, { Component } from 'react'
import { useKeenSlider } from "app/utils/vendor/keen-slider/react"
import "keen-slider/keen-slider.min.css"

import { MediaCitation } from './media.citation'
import { Arrow } from 'app/views/viewer/nav/viewer.icons'

const SPACING = 15
const SLIDES_PER_VIEW = 2

export const Carousel = ({ media }) => {
  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings

  // const [details, setDetails] = React.useState(null)
  const [currentSlide, setCurrentSlide] = React.useState(0)
  const [currentCaption, setCurrentCaption] = React.useState(caption_lookup[image_order[0]])
  const [sliderRef, slider] = useKeenSlider({
    slidesPerView: SLIDES_PER_VIEW,
    mode: "free",
    spacing: SPACING,
    centered: true,
    loop: false,
    // duration: 700,
    slideChanged: slider => {
      const currentSlideIndex = slider.details().relativeSlide
      const currentImageId = image_order[currentSlideIndex]
      const currentCaption = caption_lookup[currentImageId]
      setCurrentSlide(currentSlideIndex)
      setCurrentCaption(currentCaption)
    },
  })

  return [
    <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
      {image_order.map((id, idx) => {
        const image = display_lookup[id]
        // console.log(image)
        return (
          <CarouselItem key={id} image={image} />
        )
      })}
    </div>,
    <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.title) ? currentCaption : media} />,
    <CarouselNav
      key={'arrows_' + media.id}
      currentSlide={currentSlide}
      slides={image_order}
      onPrev={() => {
        slider.prev()
      }}
      onNext={() => {
        slider.next()
      }}
      onPick={index => {
        slider.moveToSlideRelative(index)
      }}
    />
  ]
}

const CarouselNav = ({ currentSlide, slides, onPrev, onNext, onPick }) => {
  return (
    <div className="carousel-nav">
      <div
        className={currentSlide ? "arrow-prev" : "arrow-prev arrow-disabled"}
        onClick={e => {
          e.stopPropagation()
          onPrev()
        }}
      >
        <Arrow type="left" />
      </div>
      <div
        className={currentSlide < slides.length - 1 ? "arrow-next" : "arrow-next arrow-disabled"}
        onClick={e => {
          e.stopPropagation()
          onNext()
        }}
      >
        <Arrow type="right" />
      </div>
      <div className="dots">
        {[...slides.keys()].map(idx => {
          return (
            <div
              key={idx}
              onClick={() => {
                onPick(idx)
              }}
              className={"dot-item" + (currentSlide === idx ? " active" : "")}
            >
              <div className="dot-circle" />
            </div>
          )
        })}
      </div>
    </div>

  )
}

const CarouselItem = ({ image }) => {
  return (
    <div className='keen-slider__slide carousel-item' style={{
      backgroundImage: 'url(' + image.url + ')',
    }} />
  )
}