import { action, observable } from 'mobx'
import { toValue } from './deps'
import { Value } from './typings'

export class CommonState {
  /**
   * @note: these seem attribute-like
   */
  /** @description for inputs, this is `isFocused` */
  @observable
  isActive: boolean = false

  /** @description for inputs, this is value for checkbox? or something else... */
  @observable
  isSelected: boolean = false

  /** @description for inputs, this is what was @name labelText */
  @observable
  label: string = ''

  /** @description for inputs, the VALUE OF THE INPUT */
  @observable
  value: Value = ''

  /** @description for disabling inputs from being changed */
  @observable
  isDisabled: boolean = false

  /** @description for hiding / showing inputs so we can adjust them dynamically */
  @observable
  isVisible: boolean = true

  @action
  setValue(value: Value) {
    this.value = toValue(value)
  }
  @action
  setLabel(label: string) {
    this.label = label
  }
  @action
  setIsDisabled(isDisabled: boolean) {
    this.isDisabled = isDisabled
  }
  @action
  setIsVisible(isVisible: boolean) {
    this.isVisible = isVisible
  }
  @action
  setIsSelected(isSelected: boolean) {
    this.isSelected = isSelected
  }

  /** @description for inputs, this is `isFocused` */
  @action
  setIsActive(isActive: boolean) {
    this.isActive = isActive
  }
}