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

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

const SPACING = 15
const SLIDES_PER_VIEW = 2

// obnoxious i have to do this but the slideChanged function would be "different" otherwise
let slideChangedHook = slider => console.log(slider)
let slideChanged = slider => slideChangedHook(slider)

const CarouselContainer = ({ element, media, cues, play_ts, withMouseWheel }) => {
  const { image_order, caption_lookup } = media.settings

  const [currentSlide, setCurrentSlide] = React.useState(0)
  const [sliderRef, slider] = useKeenSlider({
    slidesPerView: SLIDES_PER_VIEW,
    mode: "free",
    spacing: SPACING,
    centered: true,
    loop: false,
    slideChanged: slideChanged,
    withMouseWheel: withMouseWheel,
  })

  slideChangedHook = s => {
    setCurrentSlide(s.details().relativeSlide)
  }

  // step thru this carousel's timeline, which is ordered in reverse BTW
  if (element) {
    element.timeline.some(cue => {
      if (cue.start_ts < play_ts && (play_ts - cue.start_ts) < 0.5) {
        let slide_index = cue.settings.seek_index
        if (currentSlide < slide_index) {
          setCurrentSlide(slide_index)
          slider.moveToSlideRelative(slide_index)
        }
        return true
      }
      return false
    })
  }

  const currentCaption = caption_lookup[image_order[Math.round(currentSlide)]]

  return (
    <Carousel
      media={media}
      slider={slider}
      sliderRef={sliderRef}
      currentSlide={currentSlide}
      currentCaption={currentCaption}
      cues={cues}
    />
  )
}

const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption, cues }) => {
  const { image_order, display_lookup } = media.settings
  return (
    <div className="carousel-component">
      <div className="carousel-positioning">
        <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
          {image_order.map((id, index) => {
            const image = display_lookup[id]
            // console.log(image)
            return (
              <CarouselItem
                key={id}
                image={image}
                slider={slider}
                seekAnnotation={cues && cues.lookup[index]}
              />
            )
          })}
        </div>
        <CarouselArrow
          type="prev"
          disabled={!!currentSlide}
          onClick={() => {
            slider.prev()
          }}
        />
        <CarouselArrow
          type="next"
          disabled={currentSlide < image_order.length - 1}
          onClick={() => {
            slider.next()
          }}
        />
      </div>
      <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.caption) ? currentCaption : media} />
      <div className="carousel-nav" key={'arrows_' + media.id}>
        <CarouselDots
          currentSlide={currentSlide}
          slides={image_order}
          onPick={index => {
            slider.moveToSlideRelative(index)
          }}
        />
      </div>
    </div>
  )
}

const Carousel = React.memo(CarouselComponent)

const CarouselArrow = ({ disabled, type, onClick }) => ((
  <div
    className={(disabled ? "nav-arrow" : "nav-arrow arrow-disabled") + " " + type}
    tabIndex={0}
    onClick={e => {
      e.stopPropagation()
      onClick()
    }}
  >
    <Arrow type={type === 'prev' ? 'left' : 'right'} />
  </div>
))

const CarouselDots = ({ slides, currentSlide, onPick }) => ((
  <div className="dots">
    {[...slides.keys()].map(index => {
      return (
        <div
          key={index}
          onClick={() => {
            onPick(index)
          }}
          tabIndex={index}
          className={"dot-item" + (Math.round(currentSlide) === index ? " active" : "")}
        >
          <div className="dot-circle" />
        </div>
      )
    })}
  </div>
))

const CarouselItem = ({ image, slider, seekAnnotation }) => {
  return (
    <div className='keen-slider__slide carousel-item'>
      <div className="image-container" style={{ backgroundImage: 'url(' + image.url + ')' }}>
        <img
          src={image.url}
        />
        {seekAnnotation && (
          <div
            className="speaker-icon"
            onClick={() => {
              slider.moveToSlideRelative(seekAnnotation.settings.seek_index)
              actions.viewer.seekToTimestamp(seekAnnotation.start_ts)
            }}
          >
            {SpeakerIcon}
          </div>
        )}
      </div>
    </div>
  )
}


const mapStateToProps = state => ({
  play_ts: state.audio.play_ts,
})

export default connect(mapStateToProps)(CarouselContainer)