cally/components/pages/settings/SettingsPage.tsx

import { Button, Text, View } from "react-native-ui-lib";
import React, { useState } from "react";
import {Linking, StyleSheet} from "react-native";
import { Octicons } from "@expo/vector-icons";
import CalendarSettingsPage from "./CalendarSettingsPage";
import ChoreRewardSettings from "./ChoreRewardSettings";
import UserSettings from "./UserSettings";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { settingsPageIndex } from "../calendar/atoms";
import { useAtom } from "jotai";

const pageIndex = {
  main: 0,
  user: 1,
  calendar: 2,
  chore: 3,
  policy: 4,
};

const PRIVACY_POLICY_URL = 'https://callyapp.com';


const SettingsPage = () => {
  const { profileData } = useAuthContext();
  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
  const isntParent = profileData?.userType !== ProfileType.PARENT;

  const openPrivacyPolicy = async () => {
    const supported = await Linking.canOpenURL(PRIVACY_POLICY_URL);
    if (supported) {
      await Linking.openURL(PRIVACY_POLICY_URL);
    } else {
      console.log("Don't know how to open this URL:", PRIVACY_POLICY_URL);
    }
  };

  return (
    <View flexG>
      {pageIndex == 0 && (
        <View flexG centerH marginH-30 marginT-30>
          <Button
            disabled={isntParent}
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <ProfileIcon style={{ marginRight: 10 }} color="#07b9c8" />
                <Text
                  style={[
                    styles.label,
                    isntParent ? styles.disabledText : { color: "#07b9c8" },
                  ]}
                >
                  User Profiles & Settings
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
            onPress={() => setPageIndex(1)}
          />
          <Button
            disabled={false}
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <CalendarIcon style={{ marginRight: 10 }} />
                <Text
                  style={[
                    styles.label,
                    isntParent ? styles.disabledText : { color: "#FD1775" },
                  ]}
                >
                  Calendar Settings
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
            onPress={() => {
              setPageIndex(2);
            }}
          />
          <Button
            disabled
            // disabled={isntParent}
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <Octicons
                  name="gear"
                  size={24}
                  color="#ff9900"
                  style={{ marginRight: 10 }}
                />
                <Text style={[styles.label, true ? styles.disabledText : {color: "#ff9900"}]}>
                  To-Do Reward Settings
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
            onPress={() => setPageIndex(3)}
          />
          <Button
            backgroundColor="white"
            style={styles.mainBtn}
            onPress={openPrivacyPolicy}
            children={
              <View row centerV width={"100%"}>
                <PrivacyPolicyIcon style={{ marginRight: 10 }} />
                <Text style={[styles.label]} color={"#6C645B"}>Cally Privacy Policy</Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
          />
        </View>
      )}
      {pageIndex == 2 && <CalendarSettingsPage />}
      {pageIndex == 3 && <ChoreRewardSettings />}
      {pageIndex == 1 && <UserSettings />}
    </View>
  );
};

export default SettingsPage;

const styles = StyleSheet.create({
  mainBtn: {
    width: 311,
    justifyContent: "flex-start",
    marginBottom: 20,
    height: 57.61,
  },
  label: {
    fontFamily: "Poppins_400Regular",
    fontSize: 14.71,
    textAlignVertical: "center",
  },
  disabledText: {
    color: "#A9A9A9", // Example of a gray color for disabled text
  },
});