import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { DraggableState } from '../state'
import { ProductListFilterProps } from './typings'
import { ProductListFilterContainer } from './styled'
import { defaultRenderOption } from './renderProps'

@observer
export class ProductListFilter extends React.Component<ProductListFilterProps> {
  observableState = this.props.state || new DraggableState()
  static defaultProps = {
    className: '',
    renderOptions: defaultRenderOption,
  }
  render() {
    const { renderOptions, ...remainingProps } = this.props
    const listView = renderOptions(remainingProps, this.observableState)
    return <ProductListFilterContainer>{listView}</ProductListFilterContainer>
  }
}