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, 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}
      timelineLookup={element && element.timelineLookup}
    />
  )
}

const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption, timelineLookup }) => {
  const { image_order, display_lookup } = media.settings
  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}
            slider={slider}
            seekAnnotation={timelineLookup && timelineLookup[idx]}
          />
        )
      })}
    </div>,
    <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.caption) ? currentCaption : media} />,
    <CarouselNav
      key={'arrows_' + media.id}
      currentSlide={currentSlide}
      slides={image_order}
      onPrev={() => {
        slider.prev()
      }}
      onNext={() => {
        slider.next()
      }}
      onPick={index => {
        slider.moveToSlideRelative(index)
      }}
    />
  ]
}

const Carousel = React.memo(CarouselComponent)

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" + (Math.round(currentSlide) === idx ? " active" : "")}
            >
              <div className="dot-circle" />
            </div>
          )
        })}
      </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)