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

class RangeSliderStateInstance implements RangeSliderState {
  @observable
  minValue: number = 0
  @observable
  maxValue: number
  @observable
  selectedValue: number
  @observable
  selectedMaxValue: number
  @observable
  selectedMinValue: number

  constructor(props: RangeSliderProps) {
    this.stepValue = props.stepValue
    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
  setSelectedMin(targetValue: number) {
    if (targetValue >= this.selectedMaxValue) {
      this.selectedMinValue = this.selectedMaxValue - this.stepValue
    } else {
      this.selectedMinValue = targetValue
      const overAllValue = this.maxValue / this.stepValue
      const stepValue = targetValue / this.stepValue
      this.minWidth = (100 / overAllValue) * stepValue
    }

    this.setSelectedValue()
  }

  @action.bound
  setSelectedMax(targetValue: number) {
    if (targetValue <= this.selectedMinValue) {
      this.selectedMaxValue = this.selectedMinValue + this.stepValue
    } else {
      this.selectedMaxValue = targetValue
      const overAllValue = this.maxValue / this.stepValue
      const stepValue = overAllValue - targetValue / this.stepValue
      this.maxWidth = (100 / overAllValue) * stepValue
    }

    this.setSelectedValue()
  }

  @action.bound
  setSelectedValue() {
    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 }