// Loader component

// make animated loader of different variants
// props:
//   - variant: string
//   - style: object
//   - color: string
//   - size: number
//   - duration: number
//   - disabled: boolean
//   - disabledStyle: object

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

const Loader = ({
  variant = 'default',
  style,
  color = colors.primary,
  size = 200,
  duration = 1000,
  disabled,
  disabledStyle,
}) => {
  const [animation] = React.useState(new Animated.Value(0))

  React.useEffect(() => {
    Animated.loop(
      Animated.timing(animation, {
        toValue: 1,
        duration,
        useNativeDriver: true,
      })
    ).start()
  }, [])

  const styles = StyleSheet.create({
    container: {
      width: size,
      height: size,
      borderRadius: 75,
      backgroundColor: color,
    },
    disabled: {
      opacity: 0.5,
    },
  })

  const defaultAnimation = animation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  })

  const pulseAnimation = animation.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: ['1', '1.2', '1'],
  })

  const variants = {
    default: {
      transform: [{ rotate: defaultAnimation }],
    },
    pulse: {
      transform: [{ scale: pulseAnimation }],
    },
  }

  return (
    <Animated.View
      style={[
        styles.container,
        variants[variant],
        style,
        disabled && styles.disabled,
        disabled && disabledStyle,
      ]}
    />
  )
}

export default Loader