import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, EMPTY_OBJ } from 'exotic'
import { NO_OP } from 'exotic'
import { Item as ItemPlaceHolder } from 'abstractions/ShoppingList/'
import { ItemProps } from './typings'
import {
  defaultRenderExpandableView,
  defaultRenderActionBar,
  defaultRenderButton,
  defaultRenderRemoveConfirmation,
} from './renderProps'
import { ListState } from './state'
import { ValidationStrategy } from './strategy'
import { wording } from 'src/words'

@observer
class Item extends React.Component<ItemProps> {
  static defaultProps = {
    className: '',
    renderExpandableView: defaultRenderExpandableView,
    renderActionBar: defaultRenderActionBar,
    renderButton: defaultRenderButton,
    renderRemoveConfirmation: defaultRenderRemoveConfirmation,
    //
    onRemoveList: NO_OP,
    onEdit: NO_OP,
  }

  observableState = new ListState()
  strategy = new ValidationStrategy()
  // strategy = new ValidationStrategy({
  //   props: this.props,
  //   state: this.observableState,
  // })

  updateListName(nextProps: ItemProps) {
    const { item = EMPTY_OBJ } = nextProps
    const { listName } = item
    const name = isSafe(listName) ? listName : ''
    this.observableState.setListName(name)
  }

  updateStatus(nextProps: ItemProps) {
    const { item = EMPTY_OBJ } = nextProps
    const { accessType } = item
    const isPrivate =
      isSafe(accessType) && accessType.toLowerCase() === wording.private
        ? true
        : false
    this.observableState.setIsPrivate(isPrivate)
  }

  updateStrategyConfig(nextProps: ItemProps) {
    this.strategy.setStrategyConfig({
      props: nextProps,
      state: this.observableState,
    })
  }

  componentWillUpdate(nextProps: ItemProps) {
    this.updateListName(nextProps)
    this.updateStatus(nextProps)
    this.updateStrategyConfig(nextProps)
  }

  componentDidUpdate() {
    const { shoppingListCollapseState } = this.props
    if (this.observableState.isExpanded === true) {
      this.observableState.setIsExpanded(false)
    }
    shoppingListCollapseState.collapseState = undefined
    if (this.observableState.isConfirming === true) {
      this.observableState.handleConfirmCancel()
    }
    shoppingListCollapseState.removeConfirmationState = undefined
  }

  componentWillMount() {
    this.updateListName(this.props)
    this.updateStatus(this.props)
    this.updateStrategyConfig(this.props)
  }

  render() {
    return (
      <ItemPlaceHolder
        state={this.observableState}
        strategy={this.strategy}
        {...this.props}
      />
    )
  }
}

export { Item }
export default Item