cally/components/pages/settings/CalendarSettingsPage.tsx

import { AntDesign, Ionicons } from "@expo/vector-icons";
import React, { useState } from "react";
import { Button, View, Text, Checkbox } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { colorMap } from "@/contexts/SettingsContext";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import AppleIcon from "@/assets/svgs/AppleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";

const CalendarSettingsPage = (props: {
  setSelectedPage: (page: number) => void;
}) => {
  const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
  const [startDate, setStartDate] = useState<boolean>(true);
  return (
    <ScrollView>
      <View marginH-30>
        <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
          <View row marginT-20 marginB-35 centerV>
            <Ionicons name="chevron-back" size={22} color="#979797" />
            <Text text70 color="#979797">
              Return to main settings
            </Text>
          </View>
        </TouchableOpacity>
        <Text text60R>Calendar settings</Text>
        <View style={styles.card}>
          <Text text70 marginB-14>
            Event Color Preference
          </Text>
          <View row spread>
            <TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}>
              <View style={styles.colorBox} backgroundColor={colorMap.pink}>
                {selectedColor == colorMap.pink && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}>
              <View style={styles.colorBox} backgroundColor={colorMap.orange}>
                {selectedColor == colorMap.orange && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}>
              <View style={styles.colorBox} backgroundColor={colorMap.green}>
                {selectedColor == colorMap.green && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}>
              <View style={styles.colorBox} backgroundColor={colorMap.teal}>
                {selectedColor == colorMap.teal && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setSelectedColor(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 text70>Weekly Start Date</Text>
          <View row marginV-5 marginT-20>
            <Checkbox
              value={startDate}
              style={styles.checkbox}
              color="#ea156d"
              onValueChange={() => setStartDate(true)}
            />
            <View row marginL-8>
              <Text text70>Sundays</Text>
              <Text text70 color="gray">
                {" "}
                (default)
              </Text>
            </View>
          </View>
          <View row marginV-5>
            <Checkbox
              value={!startDate}
              style={styles.checkbox}
              color="#ea156d"
              onValueChange={() => setStartDate(false)}
            />
            <Text text70 marginL-8>
              Mondays
            </Text>
          </View>
        </View>

        <Text text60R marginT-30 marginB-25>
          Add Calendar
        </Text>

        <Button
          label="Connect Google"
          iconSource={() => (
            <View marginR-15>
              <GoogleIcon />
            </View>
          )}
          style={styles.addCalBtn}
          color="black"
          text70BL
        />
        <Button
          label="Connect Apple"
          iconSource={() => (
            <View marginR-15>
              <AppleIcon />
            </View>
          )}
          style={styles.addCalBtn}
          color="black"
          text70BL
        />
        <Button
          label="Connect Outlook"
          iconSource={() => (
            <View marginR-15>
              <OutlookIcon />
            </View>
          )}
          style={styles.addCalBtn}
          color="black"
          text70BL
        />

        <Text text60R marginT-30 marginB-20>
          Connected Calendars
        </Text>

        <View style={styles.card} gap-15>
          <View row spread centerV>
            <View row centerV>
              <GoogleIcon width={30} height={30} style={{marginRight: 5}}/>
              <Text text70>Google Calendar name</Text>
            </View>
            <CloseXIcon />
          </View>

          <View row spread centerV>
            <View row centerV>
              <AppleIcon />
              <Text text70>Google Calendar name</Text>
            </View>
            <CloseXIcon />
          </View>
        </View>
      </View>
    </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: 20,
  },
  colorBox: {
    aspectRatio: 1,
    justifyContent: "center",
    alignItems: "center",
    width: 50,
    borderRadius: 12,
  },
  checkbox: {
    borderRadius: 50,
  },
});

export default CalendarSettingsPage;