import React, {
  KeyboardEvent,
  TouchEvent,
  MouseEvent,
  TouchEventHandler,
  MouseEventHandler,
} from 'react'
import { observer } from 'mobx-react'
import { EMPTY_ARRAY } from 'exotic'
import { MediaCarouselProps, MediaCarouselStateType } from './typings'
import { getDeviceColSpan, toMediaCarouselState } from './deps'
import {
  defaultRenderArrows,
  defaultRenderItem,
  defaultRenderList,
  defaultRenderBullets,
  defaultRenderCarouselPanel,
  defaultRenderWrapper,
} from './renderProps'
import {
  handleTouchStart,
  handleTouchMove,
  handleTouchEnd,
  handleDragStart,
  handleDragEnd,
} from './handlers'

@observer
class MediaCarousel extends React.Component<
  MediaCarouselProps,
  MediaCarouselStateType
> {
  static defaultProps = {
    // props
    className: '',
    list: EMPTY_ARRAY,

    gridGap: 10,
    desktopColSpan: 4,
    tabletColSpan: 3,
    mobileColSpan: 2,
    itemHeight: 300,
    hasArrows: true,
    hasBullets: true,

    // renderProps
    renderItem: defaultRenderItem,
    renderList: defaultRenderList,
    renderArrows: defaultRenderArrows,
    renderBullets: defaultRenderBullets,
    renderWrapper: defaultRenderWrapper,
  }

  observableState: MediaCarouselStateType = toMediaCarouselState(this.props)

  handleArrowNavigation = (event: KeyboardEvent): void => {
    if (event && event.keyCode === 37) {
      this.observableState.toPrevious()
    } else if (event && event.keyCode === 39) {
      this.observableState.toNext()
    }
  }

  render() {
    const { renderWrapper, ...remainingProps } = this.props

    // assigning values to state
    const deviceColSpan = getDeviceColSpan(remainingProps)
    const swipingAttributes = {
      onTouchStart: handleTouchStart,
      onTouchMove: handleTouchMove,
      onTouchEnd: (e: TouchEvent): TouchEventHandler =>
        handleTouchEnd(e, this.observableState, remainingProps),
      onMouseDown: handleDragStart,
      onMouseUp: (e: MouseEvent): MouseEventHandler =>
        handleDragEnd(e, this.observableState, remainingProps),
      translatePercentage: this.observableState.translatePercentage,
    }
    const attributes =
      deviceColSpan >= this.props.list.length
        ? {
            ...remainingProps,
            hasArrows: false,
            hasBullets: false,
          }
        : {
            ...remainingProps,
            swipingAttributes,
          }

    this.observableState.update(remainingProps)
    this.observableState.setStep(deviceColSpan)

    const children = (
      <React.Fragment>
        {defaultRenderCarouselPanel(
          { handleArrowNavigation: this.handleArrowNavigation, ...attributes },
          this.observableState
        )}
      </React.Fragment>
    )
    const view = renderWrapper(
      { children, ...remainingProps },
      this.observableState
    )
    return view
  }
}

export { MediaCarousel }
export default MediaCarousel