import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { StyleSheet } from "react-native";
import { NavigationProp } from "@react-navigation/native";
import view from "react-native-ui-lib/src/components/view";

interface ViewSwitchProps {
  navigation: NavigationProp<any>; // Adjust according to your navigation structure
}

const ViewSwitch: React.FC<ViewSwitchProps> = ({ navigation }) => {
  const [pageIndex, setPageIndex] = useState<number>(navigation.getState().index);

  useEffect(() => {
    setPageIndex(navigation.getState().index);
  }, [navigation.getState().index])
  
  return (
    <View
      row
      spread
      style={{
        borderRadius: 30,
        backgroundColor: "#ebebeb",
        alignItems: "center",
        justifyContent: "center",
        // iOS shadow
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0,
        shadowRadius: 0,
        // Android shadow (elevation)
        elevation: 0,
      }}
      centerV
    >
      <TouchableOpacity
        onPress={() => {
          navigation.navigate("calendar");
        }}
      >
        <View
          centerV
          centerH
          height={54}
          paddingH-15
          style={ pageIndex == 1 || pageIndex == 0 ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text color={pageIndex == 1 || pageIndex == 0 ? "white" : "black"} style={styles.switchTxt}>
            Calendar
          </Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          navigation.navigate("todos");
        }}
      >
        <View
          centerV
          centerH
          height={54}
          paddingH-15
          style={pageIndex == 6 ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text color={pageIndex == 6 ? "white" : "black"} style={styles.switchTxt}>
            Chores
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default ViewSwitch;

const styles = StyleSheet.create({
  switchBtnActive: {
    backgroundColor: "#ea156c",
    borderRadius: 50,
    width: 110,
  },
  switchBtn: {
    backgroundColor: "#ebebeb",
    borderRadius: 50,
    width: 110,
  },
  switchTxt: {
    fontSize: 16,
    fontFamily: "Manrope_600SemiBold",
  },
});