import { action, observable, decorate } from 'xmobx/mobx'
import { CardState, CardRenderProp, CardProps } from './typings'
import {
  renderDefaultView,
  renderExpandedView,
  renderWrap,
} from './renderProps'

export class ExpandableState implements CardState {
  @observable isExpanded: boolean = false
  @observable isConfirming: boolean = false

  @action
  setIsExpanded(isExpanded: boolean) {
    this.isExpanded = isExpanded
    return this
  }

  @action.bound
  handleToggle() {
    this.setIsExpanded(!this.isExpanded)
  }

  @action
  setIsConfirming(isConfirming: boolean) {
    this.isConfirming = isConfirming
    return this
  }

  /**
   * @todo
   * This should come props.onConfirm & props.onCancel
   */
  @action.bound
  handleConfirm() {
    this.setIsConfirming(true)
  }

  @action.bound
  handleConfirmCancel() {
    this.setIsConfirming(false)
  }
}