import { SyntheticEvent } from 'react'
import { observable, action, computed } from 'xmobx/mobx'
import { RangeSliderProps, RangeSliderState } from './typings'

class RangeSliderStateInstance implements RangeSliderState {
  @observable
  minValue: number
  @observable
  maxValue: number
  @observable
  selectedValue: number

  constructor(props) {
    this.stepValue = props.stepValue
    this.minValue = props.minValue
    this.maxValue = props.maxValue
    this.selectedValue = props.maxValue
    this.initialMaxValue = props.maxValue
  }

  @action.bound
  minValueView(event: SyntheticEvent<HTMLButtonElement>) {
    this.minValue =
      event.target.value >= this.maxValue
        ? this.maxValue - this.stepValue
        : event.target.value
    this.selectedValueView()
  }

  @action.bound
  maxValueView(event: SyntheticEvent<HTMLButtonElement>) {
    this.maxValue =
      event.target.value <= this.minValue
        ? this.minValue + this.stepValue
        : event.target.value
    this.selectedValueView()
  }

  @action.bound
  selectedValueView() {
    this.selectedValue = this.maxValue - this.minValue
  }

  @computed
  get optionList() {
    const arrayOfObject = []
    let range = 0
    let index = 0
    for (range; range <= this.initialMaxValue; range = range + this.stepValue) {
      if (range % this.stepValue === 0) {
        const config = {
          value: range,
          index: index,
          stepValue: this.stepValue,
        }
        arrayOfObject.push(config)
        index++
      }
    }
    return arrayOfObject
  }
}

export { RangeSliderStateInstance }