import {AntDesign, Ionicons} from "@expo/vector-icons";
import React, {useCallback, useEffect, useState} from "react";
import {Button, Checkbox, Text, View} from "react-native-ui-lib";
import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
import {TouchableOpacity} from "react-native-gesture-handler";
import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import debounce from "debounce";
import AppleIcon from "@/assets/svgs/AppleIcon";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";
import * as AuthSession from "expo-auth-session";
import * as Google from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser";
import {useFetchAndSaveGoogleEvents} from "@/hooks/useFetchAndSaveGoogleEvents";
import {useFetchAndSaveOutlookEvents} from "@/hooks/useFetchAndSaveOutlookEvents";
import {useFetchAndSaveAppleEvents} from "@/hooks/useFetchAndSaveAppleEvents";
import * as AppleAuthentication from "expo-apple-authentication";
import ExpoLocalization from "expo-localization/src/ExpoLocalization";
import {colorMap} from "@/constants/colorMap";
import {useAtom} from "jotai";
import {settingsPageIndex} from "../calendar/atoms";
import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
import {useClearTokens} from "@/hooks/firebase/useClearTokens";

const googleConfig = {
    androidClientId:
        "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
    iosClientId:
        "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
    webClientId:
        "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
    scopes: [
        "email",
        "profile",
        "https://www.googleapis.com/auth/calendar.events.owned",
    ],
    extraParams: {
        access_type: "offline",
    },
};

const microsoftConfig = {
    clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af",
    redirectUri: AuthSession.makeRedirectUri({path: "settings"}),
    scopes: [
        "openid",
        "profile",
        "email",
        "offline_access",
        "Calendars.ReadWrite",
        "User.Read",
    ],
    authorizationEndpoint:
        "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
    tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
};

const CalendarSettingsPage = () => {
    const {profileData} = useAuthContext();
    const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
    const [firstDayOfWeek, setFirstDayOfWeek] = useState<string>(
        profileData?.firstDayOfWeek ??
        ExpoLocalization.getCalendars()[0].firstWeekday === 1
            ? "Mondays"
            : "Sundays"
    );
    const [isModalVisible, setModalVisible] = useState<boolean>(false);
    const [selectedService, setSelectedService] = useState<
        "google" | "outlook" | "apple"
    >("google");
    const [selectedEmail, setSelectedEmail] = useState<string>("");

    const showConfirmationDialog = (
        serviceName: "google" | "outlook" | "apple",
        email: string
    ) => {
        setSelectedService(serviceName);
        setSelectedEmail(email);
        setModalVisible(true);
    };

    const handleConfirm = () => {
        clearToken(selectedService, selectedEmail);
        setModalVisible(false);
    };

    const handleCancel = () => {
        setModalVisible(false);
    };

    const [selectedColor, setSelectedColor] = useState<string>(
        profileData?.eventColor ?? colorMap.pink
    );
    const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
        profileData?.eventColor ?? colorMap.pink
    );

    const {mutateAsync: updateUserData} = useUpdateUserData();
    const {mutateAsync: clearToken} = useClearTokens();
    const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} =
        useFetchAndSaveGoogleEvents();
    const {
        mutateAsync: fetchAndSaveOutlookEvents,
        isLoading: isSyncingOutlook,
    } = useFetchAndSaveOutlookEvents();
    const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} =
        useFetchAndSaveAppleEvents();

    WebBrowser.maybeCompleteAuthSession();
    const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);

    useEffect(() => {
        signInWithGoogle();
    }, [response]);

    const signInWithGoogle = async () => {
        try {
            if (response?.type === "success") {
                const { accessToken, refreshToken } = response?.authentication!;

                const userInfoResponse = await fetch(
                    "https://www.googleapis.com/oauth2/v3/userinfo",
                    {
                        headers: { Authorization: `Bearer ${accessToken}` },
                    }
                );

                const userInfo = await userInfoResponse.json();
                const googleMail = userInfo.email;

                let googleAccounts = profileData?.googleAccounts || {};
                const updatedGoogleAccounts = {
                    ...googleAccounts,
                    [googleMail]: { accessToken, refreshToken },
                };

                await updateUserData({
                    newUserData: { googleAccounts: updatedGoogleAccounts },
                });

                await fetchAndSaveGoogleEvents({
                    token: accessToken,
                    email: googleMail,
                });
            }
        } catch (error) {
            console.error("Error during Google sign-in:", error);
        }
    };

    const handleMicrosoftSignIn = async () => {
        try {
            console.log("Starting Microsoft sign-in...");

            const authRequest = new AuthSession.AuthRequest({
                clientId: microsoftConfig.clientId,
                scopes: microsoftConfig.scopes,
                redirectUri: microsoftConfig.redirectUri,
                responseType: AuthSession.ResponseType.Code,
                usePKCE: true, // Enable PKCE
            });

            console.log("Auth request created:", authRequest);

            const authResult = await authRequest.promptAsync({
                authorizationEndpoint: microsoftConfig.authorizationEndpoint,
            });

            console.log("Auth result:", authResult);

            if (authResult.type === "success" && authResult.params?.code) {
                const code = authResult.params.code;
                console.log("Authorization code received:", code);

                // Exchange authorization code for tokens
                const tokenResponse = await fetch(microsoftConfig.tokenEndpoint, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    body: `client_id=${
                        microsoftConfig.clientId
                    }&redirect_uri=${encodeURIComponent(
                        microsoftConfig.redirectUri
                    )}&grant_type=authorization_code&code=${code}&code_verifier=${
                        authRequest.codeVerifier
                    }&scope=${encodeURIComponent(
                        "https://graph.microsoft.com/Calendars.ReadWrite offline_access User.Read"
                    )}`,
                });

                console.log("Token response status:", tokenResponse.status);

                if (!tokenResponse.ok) {
                    const errorText = await tokenResponse.text();
                    console.error("Token exchange failed:", errorText);
                    return;
                }

                const tokenData = await tokenResponse.json();
                console.log("Token data received:", tokenData);

                if (tokenData?.access_token) {
                    console.log("Access token received, fetching user info...");

                    // Fetch user info from Microsoft Graph API to get the email
                    const userInfoResponse = await fetch(
                        "https://graph.microsoft.com/v1.0/me",
                        {
                            headers: {
                                Authorization: `Bearer ${tokenData.access_token}`,
                            },
                        }
                    );

                    const userInfo = await userInfoResponse.json();
                    console.log("User info received:", userInfo);

                    if (userInfo.error) {
                        console.error("Error fetching user info:", userInfo.error);
                    } else {
                        const outlookMail = userInfo.mail || userInfo.userPrincipalName;

                        let microsoftAccounts = profileData?.microsoftAccounts;
                        const updatedMicrosoftAccounts = microsoftAccounts
                            ? {...microsoftAccounts, [outlookMail]: tokenData.access_token}
                            : {[outlookMail]: tokenData.access_token};

                        await updateUserData({
                            newUserData: {microsoftAccounts: updatedMicrosoftAccounts},
                        });

                        await fetchAndSaveOutlookEvents(
                            tokenData.access_token,
                            outlookMail
                        );
                        console.log("User data updated successfully.");
                    }
                }
            } else {
                console.warn("Authentication was not successful:", authResult);
            }
        } catch (error) {
            console.error("Error during Microsoft sign-in:", error);
        }
    };

    const handleAppleSignIn = async () => {
        try {
            console.log("Starting Apple Sign-in...");

            const credential = await AppleAuthentication.signInAsync({
                requestedScopes: [
                    AppleAuthentication.AppleAuthenticationScope.EMAIL,
                    AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                ],
            });

            console.log("Apple sign-in result:", credential);

            alert(JSON.stringify(credential))

            const appleToken = credential.identityToken;
            const appleMail = credential.email!;


            if (appleToken) {
                console.log("Apple ID token received. Fetch user info if needed...");

                let appleAcounts = profileData?.appleAccounts;
                const updatedAppleAccounts = appleAcounts
                    ? {...appleAcounts, [appleMail]: appleToken}
                    : {[appleMail]: appleToken};

                await updateUserData({
                    newUserData: {appleAccounts: updatedAppleAccounts},
                });

                console.log("User data updated with Apple ID token.");
                await fetchAndSaveAppleEvents({token: appleToken, email: appleMail!});
            } else {
                console.warn(
                    "Apple authentication was not successful or email was hidden."
                );
            }
        } catch (error) {
            console.error("Error during Apple Sign-in:", error);
        }
    };

    const debouncedUpdateUserData = useCallback(
        debounce(async (color: string) => {
            try {
                await updateUserData({
                    newUserData: {
                        eventColor: color,
                    },
                });
            } catch (error) {
                console.error("Failed to update color:", error);
                setSelectedColor(previousSelectedColor);
            }
        }, 500),
        []
    );

    const debouncedUpdateFirstDayOfWeek = useCallback(
        debounce(async (firstDayOfWeek: string) => {
            try {
                await updateUserData({
                    newUserData: {
                        firstDayOfWeek,
                    },
                });
            } catch (error) {
                console.error("Failed to update first day of week:", error);
            }
        }, 500),
        []
    );

    const handleChangeFirstDayOfWeek = (firstDayOfWeek: string) => {
        setFirstDayOfWeek(firstDayOfWeek);
        debouncedUpdateFirstDayOfWeek(
            firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays"
        );
    };

    const handleChangeColor = (color: string) => {
        setPreviousSelectedColor(selectedColor);
        setSelectedColor(color);
        debouncedUpdateUserData(color);
    };

    let isConnectedToGoogle = false;
    if (profileData?.googleAccounts) {
        Object.values(profileData?.googleAccounts).forEach((item) => {
            if (item !== null) {
                isConnectedToGoogle = true;
                return;
            }
        });
    }

    let isConnectedToMicrosoft = false;
    const microsoftAccounts = profileData?.microsoftAccounts;
    if (microsoftAccounts) {
        Object.values(profileData?.microsoftAccounts).forEach((item) => {
            if (item !== null) {
                isConnectedToMicrosoft = true;
                return;
            }
        });
    }

    let isConnectedToApple = false;
    if (profileData?.appleAccounts) {
        Object.values(profileData?.appleAccounts).forEach((item) => {
            if (item !== null) {
                isConnectedToApple = true;
                return;
            }
        });
    }

    return (
        <ScrollView>
            <TouchableOpacity onPress={() => setPageIndex(0)}>
                <View row marginT-20 marginB-20 marginL-20 centerV>
                    <Ionicons
                        name="chevron-back"
                        size={14}
                        color="#979797"
                        style={{paddingBottom: 3}}
                    />
                    <Text
                        style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
                        color="#979797"
                    >
                        Return to main settings
                    </Text>
                </View>
            </TouchableOpacity>
            <View marginH-30 marginB-30>
                <Text style={styles.subTitle}>Calendar settings</Text>
                <View style={styles.card}>
                    <Text style={styles.cardTitle} marginB-14>
                        Event Color Preference
                    </Text>
                    <View row spread>
                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
                            <View style={styles.colorBox} backgroundColor={colorMap.pink}>
                                {selectedColor == colorMap.pink && (
                                    <AntDesign name="check" size={30} color="white"/>
                                )}
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => handleChangeColor(colorMap.orange)}
                        >
                            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
                                {selectedColor == colorMap.orange && (
                                    <AntDesign name="check" size={30} color="white"/>
                                )}
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
                            <View style={styles.colorBox} backgroundColor={colorMap.green}>
                                {selectedColor == colorMap.green && (
                                    <AntDesign name="check" size={30} color="white"/>
                                )}
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
                            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
                                {selectedColor == colorMap.teal && (
                                    <AntDesign name="check" size={30} color="white"/>
                                )}
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => handleChangeColor(colorMap.purple)}
                        >
                            <View style={styles.colorBox} backgroundColor={colorMap.purple}>
                                {selectedColor == colorMap.purple && (
                                    <AntDesign name="check" size={30} color="white"/>
                                )}
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.card}>
                    <Text style={styles.cardTitle}>Weekly Start Date</Text>
                    <View row marginV-5 marginT-20>
                        <Checkbox
                            value={firstDayOfWeek === "Sundays"}
                            style={styles.checkbox}
                            color="#ea156d"
                            onValueChange={() => handleChangeFirstDayOfWeek("Sundays")}
                        />
                        <View row marginL-8>
                            <Text text70>Sundays</Text>
                            <Text text70 color="gray">
                                {" "}
                                (default)
                            </Text>
                        </View>
                    </View>
                    <View row marginV-5>
                        <Checkbox
                            value={firstDayOfWeek === "Mondays"}
                            style={styles.checkbox}
                            color="#ea156d"
                            onValueChange={() => handleChangeFirstDayOfWeek("Mondays")}
                        />
                        <Text text70 marginL-8>
                            Mondays
                        </Text>
                    </View>
                </View>
                <Text style={styles.subTitle} marginT-30 marginB-25>
                    Add Calendar
                </Text>

                <Button
                    onPress={() => promptAsync()}
                    label={profileData?.googleAccounts ? "Connect another Google account" : "Connect Google account"}
                    labelStyle={styles.addCalLbl}
                    labelProps={{
                        numberOfLines: 2,
                    }}
                    iconSource={() => (
                        <View marginR-15>
                            <GoogleIcon/>
                        </View>
                    )}
                    style={styles.addCalBtn}
                    color="black"
                    text70BL
                />
                {profileData?.googleAccounts
                    ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
                        const googleToken = profileData?.googleAccounts?.[googleMail]?.accessToken;
                        return (
                            googleToken && (
                                <Button
                                    key={googleMail}
                                    onPress={() => {
                                        showConfirmationDialog("google", googleMail);
                                    }}
                                    label={`Disconnect ${googleMail}`}
                                    labelStyle={styles.addCalLbl}
                                    labelProps={{
                                        numberOfLines: 2,
                                    }}
                                    iconSource={() => (
                                        <View marginR-15>
                                            <GoogleIcon/>
                                        </View>
                                    )}
                                    style={styles.addCalBtn}
                                    color="black"
                                    text70BL
                                />
                            )
                        );
                    })
                    : null}

                {!profileData?.appleAccounts && (
                    <Button
                        onPress={() => handleAppleSignIn()}
                        label={"Connect Apple"}
                        labelStyle={styles.addCalLbl}
                        labelProps={{
                            numberOfLines: 2,
                        }}
                        iconSource={() => (
                            <View marginR-15>
                                <AppleIcon/>
                            </View>
                        )}
                        style={styles.addCalBtn}
                        color="black"
                        text70BL
                    />
                )}

                {profileData?.appleAccounts
                    ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
                        const appleToken = profileData?.appleAccounts?.[appleEmail!];
                        return (
                            appleToken && (
                                <Button
                                    key={appleEmail}
                                    onPress={() => showConfirmationDialog("apple", appleEmail)}
                                    label={`Disconnect Apple`}
                                    labelStyle={styles.addCalLbl}
                                    labelProps={{
                                        numberOfLines: 2,
                                    }}
                                    iconSource={() => (
                                        <View marginR-15>
                                            <AppleIcon/>
                                        </View>
                                    )}
                                    style={styles.addCalBtn}
                                    color="black"
                                    text70BL
                                />
                            )
                        );
                    })
                    : null}

                <Button
                    onPress={() => handleMicrosoftSignIn()}
                    label={profileData?.microsoftAccounts ? "Connect another Outlook account" : "Connect Outlook"}
                    labelStyle={styles.addCalLbl}
                    labelProps={{
                        numberOfLines: 2,
                    }}
                    iconSource={() => (
                        <View marginR-15>
                            <OutlookIcon/>
                        </View>
                    )}
                    style={styles.addCalBtn}
                    color="black"
                    text70BL
                />
                {profileData?.microsoftAccounts
                    ? Object.keys(profileData?.microsoftAccounts)?.map(
                        (microsoftEmail) => {
                            const microsoftToken =
                                profileData?.microsoftAccounts?.[microsoftEmail];
                            return (
                                microsoftToken && (
                                    <Button
                                        key={microsoftEmail}
                                        onPress={() => {
                                            showConfirmationDialog("outlook", microsoftEmail);
                                        }}
                                        label={`Disconnect ${microsoftEmail}`}
                                        labelStyle={styles.addCalLbl}
                                        labelProps={{
                                            numberOfLines: 2,
                                        }}
                                        iconSource={() => (
                                            <View marginR-15>
                                                <OutlookIcon/>
                                            </View>
                                        )}
                                        style={styles.addCalBtn}
                                        color="black"
                                        text70BL
                                    />
                                )
                            );
                        }
                    )
                    : null}

                {(isConnectedToGoogle ||
                    isConnectedToMicrosoft ||
                    isConnectedToApple) && (
                    <>
                        <Text style={styles.subTitle} marginT-30 marginB-20>
                            Connected Calendars
                        </Text>

                        <View style={styles.noPaddingCard}>
                            <View style={{marginTop: 20}}>
                                {profileData?.googleAccounts &&
                                    Object.keys(profileData?.googleAccounts)?.map(
                                        (googleEmail) => {
                                            const googleToken =
                                                profileData?.googleAccounts?.[googleEmail];
                                            return (
                                                googleToken && (
                                                    <TouchableOpacity
                                                        onPress={() =>
                                                            fetchAndSaveGoogleEvents({
                                                                token: googleToken,
                                                                email: googleEmail,
                                                            })
                                                        }
                                                    >
                                                        <View row paddingR-20 center>
                                                            <Button
                                                                disabled={isSyncingGoogle}
                                                                onPress={() =>
                                                                    fetchAndSaveGoogleEvents({
                                                                        token: googleToken,
                                                                        email: googleEmail,
                                                                    })
                                                                }
                                                                label={`Sync ${googleEmail}`}
                                                                labelStyle={styles.addCalLbl}
                                                                labelProps={{numberOfLines: 3}}
                                                                iconSource={() => (
                                                                    <View marginR-15>
                                                                        <GoogleIcon/>
                                                                    </View>
                                                                )}
                                                                style={styles.addCalBtn}
                                                                color="black"
                                                                text70BL
                                                            />

                                                            {isSyncingGoogle ? (
                                                                <ActivityIndicator/>
                                                            ) : (
                                                                <Ionicons
                                                                    name={"refresh"}
                                                                    size={20}
                                                                    color={"#000000"}
                                                                />
                                                            )}
                                                        </View>
                                                    </TouchableOpacity>
                                                )
                                            );
                                        }
                                    )}

                                {profileData?.appleAccounts &&
                                    Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
                                        console.log(profileData?.appleAccounts)

                                        const appleToken = profileData?.appleAccounts?.[appleEmail];
                                        return (
                                            appleToken && (
                                                <TouchableOpacity
                                                    onPress={() =>
                                                        fetchAndSaveAppleEvents({
                                                            email: appleEmail,
                                                            token: appleToken,
                                                        })
                                                    }
                                                >
                                                    <View row paddingR-20 center>
                                                        <Button
                                                            disabled={isSyncingApple}
                                                            onPress={() =>
                                                                fetchAndSaveAppleEvents({
                                                                    email: appleEmail,
                                                                    token: appleToken,
                                                                })
                                                            }
                                                            label={isSyncingApple ? "Syncing Events from the Apple calendar..." : `Sync Apple`}
                                                            labelStyle={styles.addCalLbl}
                                                            labelProps={{numberOfLines: 3}}
                                                            iconSource={() => (
                                                                <View marginR-15>
                                                                    <AppleIcon/>
                                                                </View>
                                                            )}
                                                            style={styles.addCalBtn}
                                                            color="black"
                                                            text70BL
                                                        />
                                                        {isSyncingApple ? (
                                                            <ActivityIndicator/>
                                                        ) : (
                                                            <Ionicons
                                                                name={"refresh"}
                                                                size={20}
                                                                color={"#000000"}
                                                            />
                                                        )}
                                                    </View>
                                                </TouchableOpacity>
                                            )
                                        );
                                    })}

                                {profileData?.microsoftAccounts &&
                                    Object.keys(profileData?.microsoftAccounts)?.map(
                                        (microsoftEmail) => {
                                            const microsoftToken =
                                                profileData?.microsoftAccounts?.[microsoftEmail];
                                            return (
                                                microsoftToken && (
                                                    <TouchableOpacity
                                                        onPress={() =>
                                                            fetchAndSaveOutlookEvents({
                                                                token: microsoftToken,
                                                                email: microsoftEmail,
                                                            })
                                                        }
                                                    >
                                                        <View row paddingR-20 center>
                                                            <Button
                                                                disabled={isSyncingOutlook}
                                                                onPress={() =>
                                                                    fetchAndSaveOutlookEvents({
                                                                        token: microsoftToken,
                                                                        email: microsoftEmail,
                                                                    })
                                                                }
                                                                label={`Sync ${microsoftEmail}`}
                                                                labelStyle={styles.addCalLbl}
                                                                labelProps={{numberOfLines: 3}}
                                                                iconSource={() => (
                                                                    <View marginR-15>
                                                                        <OutlookIcon/>
                                                                    </View>
                                                                )}
                                                                style={styles.addCalBtn}
                                                                color="black"
                                                                text70BL
                                                            />
                                                            {isSyncingOutlook ? (
                                                                <ActivityIndicator/>
                                                            ) : (
                                                                <Ionicons
                                                                    name={"refresh"}
                                                                    size={20}
                                                                    color={"#000000"}
                                                                />
                                                            )}
                                                        </View>
                                                    </TouchableOpacity>
                                                )
                                            );
                                        }
                                    )}
                            </View>
                        </View>
                    </>
                )}
            </View>
            <CalendarSettingsDialog
                visible={isModalVisible}
                serviceName={selectedService}
                email={selectedEmail}
                onDismiss={handleCancel}
                onConfirm={handleConfirm}
            />
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    addCalBtn: {
        backgroundColor: "#ffffff",
        marginBottom: 15,
        justifyContent: "flex-start",
        paddingLeft: 25,
    },
    backBtn: {
        backgroundColor: "red",
        marginLeft: -2,
        justifyContent: "flex-start",
    },
    card: {
        backgroundColor: "white",
        width: "100%",
        padding: 20,
        paddingBottom: 30,
        marginTop: 20,
        borderRadius: 12,
    },
    noPaddingCard: {
        backgroundColor: "white",
        width: "100%",
        marginTop: 20,
        borderRadius: 12,
    },
    colorBox: {
        aspectRatio: 1,
        justifyContent: "center",
        alignItems: "center",
        width: 51,
        borderRadius: 12,
    },
    checkbox: {
        borderRadius: 50,
    },
    addCalLbl: {
        fontSize: 16,
        fontFamily: "PlusJakartaSan_500Medium",
        flexWrap: "wrap",
        width: "75%",
        textAlign: "left",
        lineHeight: 20,
        overflow: "visible",
    },
    subTitle: {
        fontFamily: "Manrope_600SemiBold",
        fontSize: 18,
    },
    cardTitle: {
        fontFamily: "Manrope_500Medium",
        fontSize: 15,
    },
});

export default CalendarSettingsPage;