import React, { SyntheticEvent } from 'react'
import { isFunction, isSafe } from 'exotic'
import { RangeSliderProps, RangeSliderState } from './typings'
import {
  MaxValue,
  MinValue,
  FlexSpacing,
  StyledMinValueInput,
  StyledMaxValueInput,
  StyledDataListBullets,
  StyledDataList,
  SliderWrapper,
  InputWrapper,
  Wrapper,
} from './styled'

function defaultRangeValues(props: RangeSliderProps, state: RangeSliderState) {
  const { currencyType, currencyOrder } = props
  const minCount =
    currencyOrder === 'left'
      ? `${currencyType} ${state.selectedMinValue}`
      : `${state.selectedMinValue} ${currencyType}`
  const maxCount =
    currencyOrder === 'left'
      ? `${currencyType} ${state.selectedMaxValue}`
      : `${state.selectedMaxValue} ${currencyType}`
  return (
    <FlexSpacing>
      <MinValue>{minCount}</MinValue>
      <MaxValue>{maxCount}</MaxValue>
    </FlexSpacing>
  )
}

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

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

  const setTargetValue = (event: SyntheticEvent<HTMLButtonElement>) => {
    return (
      event &&
      event.target &&
      isSafe(event.target.value) &&
      parseInt(event.target.value)
    )
  }

  const handleMinChange = (event: SyntheticEvent<HTMLButtonElement>) => {
    state.setSelectedMin(setTargetValue(event))
    if (isFunction(onMinChange)) {
      onMinChange({
        selectedMinValue: state.selectedMinValue,
        selectedMaxValue: state.selectedMaxValue,
      })
    }
  }
  const handleMaxChange = (event: SyntheticEvent<HTMLButtonElement>) => {
    state.setSelectedMax(setTargetValue(event))
    if (isFunction(onMaxChange)) {
      onMaxChange({
        selectedMinValue: state.selectedMinValue,
        selectedMaxValue: state.selectedMaxValue,
      })
    }
  }

  const renderOption = args => {
    const { value, index } = args
    return <StyledDataListBullets value={value} key={index} />
  }

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

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