import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { isFamilyViewAtom } from "@/components/pages/calendar/atoms";

const CalendarViewSwitch = () => {
  const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);

  return (
    <View
      row
      spread
      style={{
        position: "absolute",
        bottom: 20,
        left: 20,
        borderRadius: 30,
        backgroundColor: "white",
        alignItems: "center",
        justifyContent: "center",
        // iOS shadow
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        // Android shadow (elevation)
        elevation: 6,
      }}
      centerV
    >
      <TouchableOpacity
        onPress={() => {
          setIsFamilyView(true);
        }}
      >
        <View
          centerV
          centerH
          height={40}
          paddingH-15
          style={isFamilyView ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text
            color={isFamilyView ? "white" : "#a1a1a1"}
            style={styles.switchTxt}
          >
            Family View
          </Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          setIsFamilyView(false);
        }}
      >
        <View
          centerV
          centerH
          height={40}
          paddingH-15
          style={!isFamilyView ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text
            color={!isFamilyView ? "white" : "#a1a1a1"}
            style={styles.switchTxt}
          >
            My View
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default CalendarViewSwitch;

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