import { useColor } from "@/hooks/useColor";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { AuthStore } from "@/stores/auth";
import { useEffect } from "react";
import { Text, View } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
import Button from "../ui/Button";

export default function LogoutModal({ visible, setVisible }: { visible: boolean; setVisible: React.Dispatch<React.SetStateAction<boolean>> }) {
  const { secondary } = useColor();
  const { logout } = useAuthStore((state: AuthStore) => state);
  const opacity = useSharedValue(0);
  // const zIndex = useSharedValue(-50);
  const translateY = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      // zIndex: zIndex.value,
    };
  });

  const animatedBodyStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: `${translateY.value}%` }],
  }));

  useEffect(() => {
    if (visible) {
      opacity.value = withTiming(1, { duration: 400 });
      // zIndex.value = withTiming(50, { duration: 400 });

      translateY.value = withTiming(0, { duration: 400 });
    } else {
      opacity.value = withTiming(0, { duration: 400 });
      // zIndex.value = withTiming(-50, { duration: 400 });

      translateY.value = withTiming(100, { duration: 400 });
    }
  }, [visible, opacity, translateY]);

  return (
    <Animated.View className={`absolute top-0 bottom-0 left-0 right-0 bg-black/40 justify-end ${visible ? "z-50" : ""}`} style={[animatedStyle]} pointerEvents={visible ? "auto" : "none"}>
      <Animated.View className=" py-8 px-4 bg-white rounded-t-3xl" style={[animatedBodyStyle]}>
        {/* <View className="absolute  -bottom-[640px] justify-center items-center left-0 right-0">
          <View className="h-[900px] w-[900px] bg-white rounded-4xl"></View>
        </View> */}
        <Text className="text-2xl font-manrope-extrabold text-center pb-8" style={{ color: secondary.base }}>
          Log Out
        </Text>
        <View className="py-8 border-t border-dashed border-slate-200 flex-row justify-center items-center gap-x-3">
          <Button onPress={() => setVisible(false)} type="secondary" className="flex-1" text="Cancel" />

          <Button
            onPress={() => {
              logout();
              setVisible(false);
            }}
            type="danger"
            className="flex-1"
            text="Yes, Logout"
          />
        </View>
      </Animated.View>
    </Animated.View>
  );
}
