import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ProductBlock, Wrapper } from './styled'
import { DraggableState } from './state'
import { defaultRenderProductList } from './renderProps'
import { ProductListFilter } from './ProductListFilter'
import { DraggableProps, DraggableStateProps } from './typings'

@observer
export default class Draggable extends React.Component<
  DraggableProps,
  DraggableStateProps
> {
  static defaultProps = {
    className: '',
    //
    renderProductList: defaultRenderProductList,
  }
  observableState: DraggableStateProps = new DraggableState()
  render() {
    const { renderProductList } = this.props
    const children = renderProductList(this.observableState)
    return (
      <Wrapper>
        <ProductListFilter />
        <ProductBlock>{children}</ProductBlock>
      </Wrapper>
    )
  }
}

export { Draggable as DragAndDrop }