// make custom animation API

// Wrap animated API of react native and make reusable variants of animations

// animations list:
/**
 * 1. pulse
 * 2. rotate
 * 3. scale
 * 4. translate
 * 5. fade
 * 6. flip
 * 7. bounce
 * 8. shake
 * 9. swing
 * 10. wobble
 * 11. jello
 * 12. heartBeat
 * 13. flash
 * 14. tada
 * 15. bounceIn
 * 16. bounceInDown
 * 17. bounceInLeft
 * 18. bounceInRight
 * 19. bounceInUp
 * 20. bounceOut
 * 21. bounceOutDown
 * 22. bounceOutLeft
 * 23. bounceOutRight
 * 24. bounceOutUp
 * 25. fadeIn
 * 26. fadeInDown
 * 27. fadeInDownBig
 * 28. fadeInLeft
 * 29. fadeInLeftBig
 * 30. fadeInRight
 * 31. fadeInRightBig
 * 32. fadeInUp
 * 33. fadeInUpBig
 * 34. fadeOut
 * 35. fadeOutDown
 * 36. fadeOutDownBig
 * 37. fadeOutLeft
 * 38. fadeOutLeftBig
 * 39. fadeOutRight
 * 40. fadeOutRightBig
 * 41. fadeOutUp
 * 42. fadeOutUpBig
 * 43. flipInX
 * 44. flipInY
 * 45. flipOutX
 * 46. flipOutY
 * 47. lightSpeedIn
 * 48. lightSpeedOut
 * 49. rotateIn
 * 50. rotateInDownLeft
 * 51. rotateInDownRight
 * 52. rotateInUpLeft
 * 53. rotateInUpRight
 * 54. rotateOut
 * 55. rotateOutDownLeft
 * 56. rotateOutDownRight
 * 57. rotateOutUpLeft
 * 58. rotateOutUpRight
 * 59. slideInDown
 * 60. slideInLeft
 * 61. slideInRight
 * 62. slideInUp
 * 63. slideOutDown
 * 64. slideOutLeft
 * 65. slideOutRight
 * 66. slideOutUp
 * 67. zoomIn
 * 68. zoomInDown
 * 69. zoomInLeft
 * 70. zoomInRight
 * 71. zoomInUp
 * 72. zoomOut
 * 73. zoomOutDown
 * 74. zoomOutLeft
 * 75. zoomOutRight
 * 76. zoomOutUp
 * 77. hinge
 * 78. jackInTheBox
 * 79. rollIn
 *  80. rollOut
 * 81. rubberBand
 * 82. swing
 *
 *
 */

// Top 10 cool combination of animations
/**
 * 1. fadeIn + zoomIn
 * 2. fadeIn + zoomOut
 * 3. fadeIn + slideInUp
 * 4. fadeIn + slideInDown
 * 5. fadeIn + slideInLeft
 * 6. fadeIn + slideInRight
 * 7. fadeIn + rotateIn
 * 8. fadeIn + rotateInDownLeft
 * 9. fadeIn + rotateInDownRight
 * 10. fadeIn + rotateInUpLeft
 * 11. fadeIn + rotateInUpRight
 * 12. fadeIn + bounceIn
 * 13. fadeIn + bounceInDown
 * 14. fadeIn + bounceInLeft
 * 15. fadeIn + bounceInRight
 *
 * */

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

const Animation = ({
  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 }],
    },

    // pulse + change border radius

    pulseBorderRadius: {
      transform: [{ scale: pulseAnimation }],
      borderRadius: pulseAnimation.interpolate({
        // change the border radius from 0 to 100
        inputRange: [0, 1],
        outputRange: [0, 100],
      }),
    },

    // switch between two colors

    pulseColor: {
      transform: [{ scale: pulseAnimation }],
      backgroundColor: pulseAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [colors.primary, colors.error],
      }),
    },
  }

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

export default Animation