import { StyleSheet, Animated, TouchableWithoutFeedback, View } from 'react-native';
import React, { ComponentType, useState, useEffect } from 'react';

import { useTheme } from './ThemeContext';

const noop = () => undefined;

export type Props = {
  readonly value?: boolean;
  readonly onValueChange?: (boolean) => void;
};

const Switch: ComponentType<Props> = ({ value = false, onValueChange = noop }) => {
  const theme = useTheme();

  const offset = value ? theme._switch.thumbOn.left : theme._switch.thumbOff.left;

  const [animatedOffset] = useState(() => new Animated.Value(offset));

  useEffect(() => {
    Animated.timing(animatedOffset, {
      toValue: offset,
      duration: 200.0,
      useNativeDriver: false,
    }).start();
  }, [value]);
  return (
    <TouchableWithoutFeedback onPress={() => onValueChange(!value)}>
      <View style={StyleSheet.flatten([theme._switch.track, value ? theme._switch.trackOn : theme._switch.trackOff])}>
        <View style={theme._switch.thumbWrapper}>
          <Animated.View
            style={StyleSheet.flatten([
              theme._switch.thumb,
              value ? theme._switch.thumbOn : theme._switch.thumbOff,
              { left: animatedOffset },
            ])}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default Switch;