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
  @observable
  selectedMaxValue: number
  @observable
  selectedMinValue: number

  constructor(props: RangeSliderProps) {
    this.stepValue = props.stepValue
    this.minValue = props.minValue
    this.maxValue = props.maxValue
    this.selectedMaxValue =
      props.selectedMaxValue === this.maxValue
        ? this.maxValue
        : props.selectedMaxValue
    this.selectedMinValue =
      props.selectedMinValue === this.minValue
        ? this.minValue
        : props.selectedMinValue
    this.selectedValue = props.maxValue
    this.initialMaxValue = props.maxValue
  }

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

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

  @action.bound
  selectedValueView() {
    this.selectedValue = this.selectedMaxValue - this.selectedMinValue
  }

  @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 }