import React from 'react'
import { observer } from 'mobx-react'
import { EMPTY_ARRAY } from 'exotic'
import { MediaCarouselProps, MediaCarouselStateType } from './typings'
import { MediaCarouselState } from './state'
import { getDeviceColSpan, toMediaCarouselState } from './deps'
import {
  defaultRenderArrows,
  defaultRenderItem,
  defaultRenderList,
  defaultRenderBullets,
  defaultRenderCarouselPanel,
  defaultRenderWrapper,
} from './renderProps'

@observer
class MediaCarousel extends React.Component<
  MediaCarouselProps,
  MediaCarouselStateType
> {
  static defaultProps = {
    // props
    className: '',
    list: EMPTY_ARRAY,
    gridGap: 10,
    desktopColSpan: 3,
    tabletColSpan: 2,
    mobileColSpan: 1,

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

  observableState: MediaCarouselStateType = toMediaCarouselState(this.props)

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

    // assigning values to state
    const deviceColSpan = getDeviceColSpan(remainingProps)
    const attributes =
      deviceColSpan === this.props.list.length
        ? {
            ...remainingProps,
            hasArrows: false,
            hasBullets: false,
          }
        : remainingProps

    this.observableState.setStep(deviceColSpan)

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

export { MediaCarousel }
export default MediaCarousel