import React from 'react'
// import { EMPTY_ARRAY } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { GalleryProps, DefaultGalleryState } from './typings'
import { GalleryState } from './State'
import {
  defaultRenderNavigations,
  defaultRenderBullet,
  defaultRenderItem,
  // defaultRenderBulletList,
  // defaultRenderList,
  defaultRenderGalleryTemplate,
  defaultRenderWrapper,
} from './renderProps'

function initGalleryState() {
  return new GalleryState()
}

function getGalleryState(props: GalleryProps) {
  if (props.state === undefined) {
    return initGalleryState()
  } else {
    return props.state
  }
}

@observer
class Gallery extends React.Component<GalleryProps, DefaultGalleryState> {
  static defaultProps = {
    className: '',

    /**
     * props
     */
    startSlideIndex: 0,
    // list: EMPTY_ARRAY,
    list: [],
    shouldHaveBullets: true,
    shouldHaveArrows: true,
    displayCountOnMobile: 2,
    displayCountOnTablet: 3,
    displayCountOnDesktop: 6,

    /**
     * render props
     */
    renderNavigations: defaultRenderNavigations,
    renderItem: defaultRenderItem,
    renderBullet: defaultRenderBullet,
    // renderBulletList: defaultRenderBulletList,
    // renderList: defaultRenderList,
    renderWrapper: defaultRenderWrapper,
  }

  // adding state for the component
  observableState: GalleryState = getGalleryState(this.props)

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

export { Gallery }
export default Gallery