import React, { SyntheticEvent } from 'react'
import { isFunction } from 'exotic'
import { wording } from 'src/words'
import { RangeSliderProps, RangeSliderState } from './typings'
import {
  MaxValue,
  MinValue,
  FlexSpacing,
  StyledMinValueInput,
  StyledMaxValueInput,
  InputWrapper,
  Wrapper,
} from './styled'

function defaultRangeValues(props: RangeSliderProps, state: RangeSliderState) {
  const minCount = `${wording.min}: ${state.minValue}`
  const maxCount = `${wording.max}: ${state.maxValue}`
  return (
    <FlexSpacing>
      <MinValue>{minCount}</MinValue>
      <MaxValue>{maxCount}</MaxValue>
    </FlexSpacing>
  )
}

function defaultSliderInput(props: RangeSliderProps, state: RangeSliderState) {
  const { minValue, maxValue, onMinChange, onMaxChange } = props

  const inputAttributes = {
    type: 'range',
    step: props.stepValue,
    min: minValue,
    max: maxValue,
    list: 'stepDots',
    state,
  }

  const handleMinChange = (event: SyntheticEvent<HTMLButtonElement>) => {
    if (isFunction(onMinChange)) {
      state.minValueView(event)
      onMinChange({ minValue: state.minValue, maxValue: state.maxValue })
    }
  }
  const handleMaxChange = (event: SyntheticEvent<HTMLButtonElement>) => {
    if (isFunction(onMaxChange)) {
      state.maxValueView(event)
      onMaxChange({ minValue: state.minValue, maxValue: state.maxValue })
    }
  }

  const renderOption = props => {
    const { value, index } = props
    return <option value={value} key={index} />
  }

  return (
    <InputWrapper>
      <datalist id={'stepDots'}>{state.optionList.map(renderOption)}</datalist>
      <StyledMinValueInput
        className={'minValue'}
        onChange={handleMinChange}
        id={'minValue'}
        value={state.minValue}
        {...inputAttributes}
      />
      <StyledMaxValueInput
        className={'maxValue'}
        onChange={handleMaxChange}
        id={'maxValue'}
        value={state.maxValue}
        {...inputAttributes}
      />
    </InputWrapper>
  )
}

function defaultRenderBox(props: RangeSliderProps, state: RangeSliderState) {
  const { renderSliderInput, renderRangeValues, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderRangeValues(remainingProps, state)}
      {renderSliderInput(remainingProps, state)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: RangeSliderProps) {
  const { className, dataQa, children } = props
  return (
    <Wrapper className={className} data-qa={dataQa}>
      {children}
    </Wrapper>
  )
}

export {
  defaultRangeValues,
  defaultSliderInput,
  defaultRenderBox,
  defaultRenderWrapper,
}