import React, { useRef, useEffect } from "react";
import { View, Text, TouchableOpacity, Animated } from "react-native";
import { customStyles } from "../styles/Global";

export default function YesNoToggle({
  label,
  value, // 1 or 0
  onChange,
  styles,
  yesLabel = "Yes",
  noLabel = "No",
}) {

    // const customStyle=customStyles(props.DarkMode,route.name);
  const animatedChoice = useRef(new Animated.Value(value ? 1 : 0)).current;

  // Animate when value changes
  useEffect(() => {
    Animated.timing(animatedChoice, {
      toValue: value ? 1 : 0,
      duration: 200,
      useNativeDriver: true,
    }).start();
  }, [value]);

  const xpos = animatedChoice.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -75], // match your original movement
  });

  return (
    <View style={[styles?.container,{marginTop:"4%"}]}>
      {label ? (
        <Text style={[styles?.label]}>{label}</Text>
      ) : null}

      <View style={styles?.choiceBoxCon}>
        <View style={styles?.choiceBox}>
          <Animated.View
            style={[
              styles?.bg,
              value ? styles?.bgYes : styles?.bgNo,
              { transform: [{ translateX: xpos }] },
            ]}
          />

          <TouchableOpacity
            style={styles?.choice}
            onPress={() => onChange(1)}
          >
            <Text style={[styles?.choiceText, value ? styles?.choiceTextActive : {}]}>
              {yesLabel}
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles?.choice}
            onPress={() => onChange(0)}
          >
            <Text style={[styles?.choiceText, value === 0 ? styles?.choiceTextActive : {}]}>
              {noLabel}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}
