import { Animated, StyleSheet } from 'react-native';
import { useCardAnimation } from '@react-navigation/stack';
import { RootStackScreenProps } from '../models/navigation';
import { useEffect, useState } from 'react';
import { useDebounce } from '../hooks/';
import { useSetRelay } from '../queries/evok';
import { Text, View, Pressable } from 'native-base';

function EvokModalScreen({ navigation }: RootStackScreenProps<'EvokModal'>) {
  const { current } = useCardAnimation();
  const [value, _setValue] = useState<number>(50);
  const debouncedValue = useDebounce<number>(value, 200);
  const { mutate: setRelay } = useSetRelay();

  useEffect(() => {
    setRelay({
      circuit: '1_01',
      data: { pwm_duty: debouncedValue },
    });
  }, [setRelay, debouncedValue]);

  return (
    <View className="flex-1 items-center justify-end bg-transparent">
      <Pressable
        // style={StyleSheet.absoluteFill}
        style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(0, 0, 0, 0.4)' }]}
        onPress={navigation.goBack}
      />
      <Animated.View
        className="min-h-[50%] rounded-t-xl bg-white p-4 shadow-inner"
        style={{
          transform: [
            {
              scale: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0.9, 1],
                extrapolate: 'clamp',
              }),
            },
          ],
        }}
      >
        {/* here used to be a slider */}
        <Text>
          Mise en place is a French term that literally means “put in place.” It also refers to a
          way cooks in professional kitchens and restaurants set up their work stations—first by
          gathering all ingredients for a recipes, partially preparing them (like measuring out and
          chopping), and setting them all near each other. Setting up mise en place before cooking
          is another top tip for home cooks, as it seriously helps with organization. It’ll pretty
          much guarantee you never forget to add an ingredient and save you time from running back
          and forth from the pantry ten times.
        </Text>
      </Animated.View>
    </View>
  );
}

export default EvokModalScreen;
