import React, { useState } from "react";
import { View, Text, StyleSheet, Switch } from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import colors from "../../components/colors";

type RootStackParamList = {
  BecomeOrg: undefined;
  Profile: undefined;
};

type SwitchNavigatorProps = {
  role: string;
  status: string;
};

const SwitchNavigator: React.FC<SwitchNavigatorProps> = ({ role, status }) => {
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const [isEnabled, setIsEnabled] = useState(false);

  const toggleSwitch = () => {
    const newValue = !isEnabled;
    setIsEnabled(newValue);

    if (newValue) {
      navigation.navigate("BecomeOrg"); // Navigate when ON
      setTimeout(() => {
       setIsEnabled(false);  
      }, 2000);
      // Reset switch to OFF after navigation
    } else {
      navigation.navigate("Profile"); // Navigate when OFF
    }
  };

  console.log("status :", status);
  console.log("role :", role);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {!isEnabled && role !== "USER" 
          ? "Become an Organizer"
          : `Request Organizer Role ${status}`}
      </Text>
      <Switch
        trackColor={{ false: "#767577", true: colors.textLight }}
        thumbColor={isEnabled ? colors.pastelBlue : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
};

export default SwitchNavigator;

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: 'flex-end',
    paddingHorizontal: 16,
    paddingVertical: 10,
    gap: 10,
  },
  text: {
    fontSize: 18,
    flexShrink: 1, // Wrap text if too long
  },
});