// Slider component
// --------------------------------------------------
// start with the simple and functional component

import React, { useState, useEffect, useRef } from 'react'
import { View, StyleSheet } from 'react-native'

import { colors, spacing } from '../theme'

const Slider = ({
  min = 0,
  max = 100,
  step = 5,
  value = 21,
  onChange = () => {},
}) => {
  // What to do
  // 1. Create a state to hold the slider value
  // 2. Create a ref to hold the slider element
  // 3. Create a function to start sliding
  // 4. Create a function to continue sliding
  // 5. Create a function to stop sliding
  // 6. Create a function to calculate the slider value
  // 7. Create a function to calculate the slider position
  // 8. Create a function to calculate the slider percentage
  // 9. Create a function to calculate the slider step
  // 10. Create a function to calculate the slider step percentage
  // 11. Create a function to calculate the slider step position
  // 12. Create a function to calculate the slider step value
  /// complete the function to make slider work

  const sliderRef = useRef(null)

  const [sliderValue, setSliderValue] = useState(value)

  const startSliding = () => {
    const slider = sliderRef.current
    slider.setNativeProps({
      style: {
        backgroundColor: colors.primary,
      },
    })

    // calculateSliderValue()
  }

  const continueSliding = () => {
    const slider = sliderRef.current
    slider.setNativeProps({
      style: {
        backgroundColor: colors.primary,
      },
    })

    // calculateSliderValue()
  }

  const stopSliding = () => {
    const slider = sliderRef.current
    slider.setNativeProps({
      style: {
        backgroundColor: colors.primaryLight,
      },
    })

    // calculateSliderValue()
  }

  const calculateSliderValue = () => {
    const slider = sliderRef.current
    const sliderWidth = slider.clientWidth
    const sliderPosition = slider.offsetLeft
    const sliderPercentage = (sliderPosition / sliderWidth) * 100
    const sliderStep = (max - min) / step
    const sliderStepPercentage = 100 / sliderStep
    const sliderStepPosition = sliderPercentage / sliderStepPercentage
    const sliderStepValue = min + sliderStepPosition * step
    setSliderValue(sliderStepValue)
  }

  const calculateSliderPosition = () => {
    const slider = sliderRef.current
    const sliderWidth = slider.clientWidth
    const sliderPosition = slider.offsetLeft
    const sliderPercentage = (sliderPosition / sliderWidth) * 100
    const sliderStep = (max - min) / step
    const sliderStepPercentage = 100 / sliderStep
    const sliderStepPosition = sliderPercentage / sliderStepPercentage
    const sliderStepValue = min + sliderStepPosition * step
    setSliderValue(sliderStepValue)
  }

  useEffect(() => {
    calculateSliderValue()
  }, [])

  useEffect(() => {
    onChange(sliderValue)
  }, [sliderValue])

  return (
    <View style={[styles.slider]}>
      <View style={styles.track} />
      <View style={[styles.trackFill, { width: `${sliderValue}%` }]} />
      <View
        onTouchStart={startSliding}
        onTouchMove={continueSliding}
        onTouchEnd={stopSliding}
        ref={sliderRef}
        style={[
          styles.thumb,
          {
            left: `${sliderValue}%`,
          },
        ]}
      >
        <View style={styles.thumbIconContainer} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  slider: {
    width: '100%',
    height: spacing.s_4,
    borderRadius: spacing.s_2,
    backgroundColor: colors.primaryLight,
    position: 'relative',
  },
  track: {
    width: '100%',
    height: spacing.s_4,
    borderRadius: spacing.s_2,
    backgroundColor: colors.primaryLight,
    position: 'absolute',
    top: 0,
    left: 0,
  },
  trackFill: {
    width: '0%',

    height: spacing.s_4,
    borderRadius: spacing.s_2,
    backgroundColor: colors.primary,
    position: 'absolute',
    top: 0,
    left: 0,
  },
  thumb: {
    width: spacing.s_6,
    height: spacing.s_6,
    borderRadius: spacing.s_3,
    backgroundColor: colors.primary,
    position: 'absolute',
    top: spacing.s_1,
    left: 0,

    justifyContent: 'center',
    alignItems: 'center',
  },
  thumbIconContainer: {
    width: spacing.s_4,

    height: spacing.s_4,
    borderRadius: spacing.s_2,
    backgroundColor: colors.white,
  },
})

export default Slider