import React from 'react'
import {
  ShoppingList as ShoppingListPlaceholder,
  ShoppingListProps,
} from 'abstractions/ShoppingList'
import { observer } from 'xmobx/mobx-react'
import { defaultRenderShoppingListItem } from './renderProps'
import { ShoppingListCollapseState } from './state'

@observer
class ShoppingList extends React.Component<ShoppingListProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderShoppingListItem: defaultRenderShoppingListItem,
  }

  shoppingListCollapseState = new ShoppingListCollapseState()

  render() {
    return (
      <ShoppingListPlaceholder
        shoppingListCollapseState={this.shoppingListCollapseState}
        {...this.props}
      />
    )
  }
}

export { ShoppingList }
export default ShoppingList