import { Motion } from '@legendapp/motion'
import { Pressable, View } from 'react-native'
import { Easing } from 'react-native-reanimated'

import { Palette } from '../styles'
import { LinearGradient } from './LinearGradient/LinearGradient'

export default ({ value, setValue, containerStyle = {} }) => {
  const currentColor = value ? ['#F94697', '#7023F7'] : ['#8C8C8C', '#8C8C8C']

  const switchHeight = 28
  const internalMargin = 2

  const itemSize = switchHeight - internalMargin * 2

  return (
    <Pressable onPress={() => setValue(!value)}>
      <LinearGradient
        colors={currentColor}
        style={{
          flexDirection: 'row',
          width: switchHeight * 2,
          height: switchHeight,
          borderRadius: 25,
          backgroundColor: 'red',
          ...containerStyle,
        }}
      >
        <Motion.View
          animate={{
            right: value ? 0 : switchHeight,
            left: value ? switchHeight : 0,
          }}
          transition={{
            type: 'timing',
            duration: 300,
            easing: Easing.easing,
          }}
          style={{
            position: 'absolute',
            width: itemSize,
            height: itemSize,
            margin: internalMargin,
            borderRadius: 25,
            backgroundColor: Palette.white,
          }}
        />
      </LinearGradient>
    </Pressable>
  )
}