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


const CalendarViewSwitch = () => {
    const [calView, setCalView] = useState<boolean>(false);
    const viewSwitch = useSetAtom(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={() => {
                    setCalView(true);
                    viewSwitch(true);
                }}
            >
                <View
                    centerV
                    centerH
                    height={40}
                    paddingH-15
                    style={calView ? styles.switchBtnActive : styles.switchBtn}
                >
                    <Text color={calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
                        Family View
                    </Text>
                </View>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => {
                    setCalView(false);
                    viewSwitch(false);
                }}
            >
                <View
                    centerV
                    centerH
                    height={40}
                    paddingH-15
                    style={!calView ? styles.switchBtnActive : styles.switchBtn}
                >
                    <Text color={!calView ? "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'
    }
});