import React from 'react'
import { IObservableChange } from 'xmobx/mobx'
import { FormState, InputState } from 'src/forms'
import {
  toRadioInput,
  unselectInputsList,
  subscribeRadioGroupInputsList,
} from './deps'
import { RadioItemState } from './typings'

/**
 * @example @ganesh @gp @todo serialization
 */
// const isSelected = input => input.isSelected
// toSerialized = () => {
//   const selectedInput = this.inputsList.find(isSelected)
//   const name = this.name || selectedInput.name
//   const { value, label, identity } = selectedInput
//   return {
//     [name]: value || label || identity,
//   }
// }

const IS_BROWSER = typeof window === 'object'

/**
 * @alias formhandler
 * ^ for some reason
 *
 * @extend this the same as FormState
 */
class RadioGroupState extends FormState {
  /**
   * @default shouldNotLeaveThisAsDefault
   */
  name = 'RadioGroup'
  lastUpdate = Date.now()

  /**
   * @deprecated this is stupid just add onChange
   *
   * @description this is intended ONLY to be update custom click handling
   *              AFTER the component is used (ASYNC)
   *              and AFTER the click handling logic is changed
   */
  updateFrom(list: Array<RadioItemState> = undefined) {
    if (list === undefined) {
      console.warn('@@fixme!!! something has a typo on the .updateFrom...')
      return this
    }

    const inputsList = list.map(toRadioInput)
    this.inputsList = inputsList.map(FormState.toInputState)
    // this has to be called after mapping, for now,
    // because the abstract radiogroupstate adds the onClick logic
    this.init()
    return this
  }

  /**
   * @override
   * @description intended to be extended for hooking in to the change
   *              but NOT overriding it
   *
   * @listens onChange
   * @see this.handleInputChange
   */
  onInputChange(input: InputState) {
    // @NO_OPERATION (extension only)
  }

  /**
   * @todo should debounce, often this may be triggered multiple times
   * @todo - onChange could happen before or after this handling of change...
   *
   * @listens isSelected (value change)
   */
  // @lint @todo figure out how to split
  // eslint-disable-next-line
  handleInputChange(
    input: InputState,
    observableChange: IObservableChange
  ): void {
    // console.log('RadioGroupState_HANDLING_INPUT_CHANGE')
    // differenceInMilliseconds
    const ms = Date.now() - this.lastUpdate
    if (ms < 300) {
      this.lastUpdate = Date.now()
      console.log({ ms, lastUpdate: this.lastUpdate })
      console.warn('optimized_debounce')
      return
    }

    unselectInputsList(input, this.inputsList)

    /**
     * @description forgot this lil ole line that selected it :-D
     */
    input.isSelected = true

    // @note === this was for  make default which had another issue
    // input.isSelected = !input.isSelected
    // /**
    //  * @description this way we can use the logic  for more than radiogroups
    //  * (though it should be split out)
    //  */
    // if (input.type === 'radio') {
    //   input.isSelected = true
    // }

    this.onInputChange(input)
  }

  /**
   * @api https://mobx.js.org/refguide/observe.html
   */
  init(): void {
    if (IS_BROWSER === false) {
      return
    }
    const handle = this.handleInputChange.bind(this)
    subscribeRadioGroupInputsList(this.inputsList, handle)
  }
}

export { RadioGroupState }
export default RadioGroupState