import React from 'react'
import { observer } from 'mobx-react'
import { MediaCarouselProps, MediaCarouselState } from './typings'
import { MediaCarouselContainer } from './state'
import {
  defaultRenderDeviceSpecific,
  defaultRenderComponent,
  defaultRenderWrapper,
} from './renderProps'

@observer
class MediaCarousel extends React.Component<
MediaCarouselProps,
MediaCarouselState
> {
  static defaultProps = {
    className: '',
    gridGap: 15,
    desktopColspan: 3,
    tabletColspan: 2,
    mobileColspan: 1,
    bulletSize: 10,
    bulletColor: '#808080',
    hasBullets: false,
    hasNavigations: false,
    arrowIconColor: '#000',
    arrowIconSize: '24px',
    // renderProps
    renderComponent: defaultRenderComponent,
    renderWrapper: defaultRenderWrapper,
  }

  constructor(props) {
    super(props)
    this.state = new MediaCarouselContainer()
    this.state.setList(props.list)
  }

  render() {
    const deviceSpecific = defaultRenderDeviceSpecific({
      desktop: this.props.desktopColspan,
      tablet: this.props.tabletColspan,
      mobile: this.props.mobileColspan,
    })
    this.state.positionStep = deviceSpecific
    const { renderWrapper, ...remainingProps } = this.props
    const view = renderWrapper(remainingProps, this.state)
    return view
  }
}

export { MediaCarousel }
export default MediaCarousel