import React 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'

@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)

  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)}
      </React.Fragment>
    )
    const view = renderWrapper({ children, ...remainingProps }, this.observableState)
    return view
  }
}

export { MediaCarousel }
export default MediaCarousel