// Switch component

// How it works
// value is provided by the parent component (boolean)
// when the value is true, the switch is on
// when the value is false, the switch is off

// props:
//   - value: boolean
//   - onValueChange: function
//   - style: object
//   - disabled: boolean
//   - disabledStyle: object
//   - disabledThumbStyle: object
//   - disabledTrackStyle: object
//   - thumbColor: string
//   - trackColor: string
//   - thumbStyle: object
//   - trackStyle: object

import React, { useRef, useEffect, useState } from 'react'
import { View, StyleSheet, TouchableOpacity, Animated } from 'react-native'
import { colors } from '../theme'

const Switch = ({
  value = false,
  onValueChange,
  style,
  disabled,
  disabledStyle,
  disabledThumbStyle,
  disabledTrackStyle,
  thumbColor = colors.primary,
  trackColor = colors.n_100,
  thumbStyle,
  trackStyle,
  size,
}) => {
  const [isOn, setIsOn] = useState(value)

  const handleSwitch = () => {
    setIsOn(!isOn)
    onValueChange(!isOn)
  }

  // animate thumb
  const animatedThumb = useRef(new Animated.Value(0)).current
  const animateThumb = () => {
    Animated.timing(animatedThumb, {
      toValue: isOn ? 1 : 0,
      duration: 100,
      useNativeDriver: true,
    }).start()
  }

  useEffect(() => {
    animateThumb()
  }, [isOn])

  // styles
  const styles = StyleSheet.create({
    switch: {
      width: size || 50,
      height: size * 0.5 || 25,
      backgroundColor: '#f0f0f0',
      borderRadius: 20,
      padding: 2,
      flexDirection: 'row',
      alignItems: 'center',
    },
    thumb: {
      width: size * 0.5 || 25,
      height: size * 0.5 || 25,
      borderRadius: 13,
      backgroundColor: '#fff',
      elevation: 2,
      transform: isOn
        ? [
            {
              translateX: animatedThumb.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 4],
              }),
            },
          ]
        : [
            {
              translateX: animatedThumb.interpolate({
                inputRange: [0, 1],
                outputRange: [-24, 0],
              }),
            },
          ],
    },
    track: {
      flex: 1,
      height: size * 0.5 || 25,
      borderRadius: 13,
      backgroundColor: '#f0f0f0',
    },
    disabled: {
      opacity: 0.5,
    },
  })

  return (
    <TouchableOpacity
      onPress={handleSwitch}
      disabled={disabled}
      style={[
        styles.switch,
        style,
        disabled && styles.disabled,
        disabled && disabledStyle,
      ]}
    >
      <View
        style={[
          styles.track,
          trackStyle,
          disabled && styles.disabled,
          disabled && disabledTrackStyle,
          isOn && { backgroundColor: trackColor },
        ]}
      />
      <Animated.View
        ref={animatedThumb}
        style={[
          styles.thumb,
          thumbStyle,
          disabled && styles.disabled,
          disabled && disabledThumbStyle,
          isOn && { backgroundColor: thumbColor },
        ]}
      />
    </TouchableOpacity>
  )
}

export default Switch