cally/components/pages/calendar/EditEventDialog.tsx

import { View, Text, Button, Switch } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
import {
  Dialog,
  TextField,
  DateTimePicker,
  Picker,
  ButtonSize,
} from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { StyleSheet } from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import { eventCellCss } from "react-native-big-calendar";

interface IEditEventDialog {
  event: CalendarEvent;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}
const EditEventDialog = (editEventProps: IEditEventDialog) => {
  const { updateEvent } = useCalendarContext();
  const [event, setEvent] = useState<CalendarEvent>(editEventProps.event);

  useEffect(() => {
    setEvent(editEventProps.event);
  }, [editEventProps.isVisible]);

  return (
    <Dialog
      bottom={true}
      height={"90%"}
      panDirection={PanningDirectionsEnum.DOWN}
      onDismiss={() => editEventProps.setIsVisible(false)}
      containerStyle={{
        borderRadius: 10,
        backgroundColor: "white",
        width: "100%",
        alignSelf: "stretch",
        padding: 0,
        paddingTop: 4,
        margin: 0,
      }}
      visible={editEventProps.isVisible}
    >
      <View row spread>
        <Button
          color="#05a8b6"
          style={styles.topBtn}
          label="Cancel"
          onPress={() => {
            editEventProps.setIsVisible(false);
          }}
        />
        <View marginT-12>
          <DropModalIcon
            onPress={() => {
              editEventProps.setIsVisible(false);
            }}
          />
        </View>
        <Button
          color="#05a8b6"
          style={styles.topBtn}
          label="Save"
          onPress={() => {
            try {
              if (event.id) {
                updateEvent(event, event.id);
                editEventProps.setIsVisible(false);
              }
            } catch (error) {
              console.error(error);
            }
          }}
        />
      </View>

      <TextField
        placeholder="Edit event title"
        value={event.title}
        onChangeText={(text) => {
          setEvent((prevEvent) => ({
            ...prevEvent,
            title: text,
          }));
        }}
        placeholderTextColor="#2d2d30"
        text60R
        marginT-15
        marginL-30
      />
      <View style={styles.divider} marginT-8 />

      <View row spread marginB-10 marginL-30 centerV>
        <View row>
          <AntDesign name="clockcircleo" size={24} color="#919191" />
          <Text text70 marginL-10>
            All day
          </Text>
        </View>
        <View right marginR-30>
          <Switch
            onColor={"#ea156c"}
            offColor={"#e1e1e2"}
            marginL-10
            value={event.allDay}
            onValueChange={(value) =>
              setEvent((prev) => ({ ...prev, allDay: value }))
            }
          />
        </View>
      </View>
      <View marginL-30 centerV>
        <View row marginB-10 spread>
          <View row centerV>
            <Feather name="calendar" size={25} color="#919191" />
            <DateTimePicker
              value={event.start}
              text70
              marginL-8
              onChange={(date) => {
                setEvent((prev) => ({ ...prev, start: date }));
              }}
            />
          </View>
          <DateTimePicker
            text70
            value={event.start}
            onChange={(date) => {
              setEvent((prev) => ({ ...prev, start: date }));
            }}
            mode="time"
            marginR-30
          />
        </View>

        {!event.allDay && (
          <View row marginB-10 spread>
            <View row centerV>
              <Feather name="calendar" size={25} color="#919191" />
              <DateTimePicker
                value={event.end}
                text70
                marginL-8
                onChange={(date) => {
                  setEvent((prev) => ({ ...prev, end: date }));
                }}
              />
            </View>
            <DateTimePicker
              text70
              value={event.end}
              onChange={(date) => {
                setEvent((prev) => ({ ...prev, end: date }));
              }}
              mode="time"
              marginR-30
            />
          </View>
        )}
      </View>
      <View style={styles.divider} />

      <View marginH-30 marginB-10 row centerV>
        <Ionicons name="person-circle-outline" size={28} color="#919191" />
        <Text text70R marginL-10>
          Assignees
        </Text>
        <Button
          size={ButtonSize.small}
          paddingH-8
          iconSource={() => (
            <Ionicons name="add-outline" size={20} color="#ea156c" />
          )}
          style={{
            marginLeft: "auto",
            borderRadius: 8,
            backgroundColor: "#ffe8f1",
            borderColor: "#ea156c",
            borderWidth: 1,
          }}
          color="#ea156c"
          label="Assign"
        />
      </View>
      <View row marginH-13 marginT-13>
        <View
          marginL-30
          style={{
            aspectRatio: 1,
            width: 50,
            backgroundColor: "red",
            borderRadius: 50,
          }}
        />
        <View
          marginL-30
          style={{
            aspectRatio: 1,
            width: 50,
            backgroundColor: "red",
            borderRadius: 50,
          }}
        />
      </View>
      <View style={styles.divider} />
      <View marginH-30 marginB-0 row spread centerV>
        <View row centerV>
          <ClockIcon />
          <Text text70 marginL-10>
            Reminder
          </Text>
        </View>
        <View>
          <Button
            size={ButtonSize.small}
            paddingH-8
            iconSource={() => (
              <Ionicons name="add-outline" size={20} color="#ea156c" />
            )}
            style={{
              marginLeft: "auto",
              borderRadius: 8,
              backgroundColor: "#ffe8f1",
              borderColor: "#ea156c",
              borderWidth: 1,
            }}
            color="#ea156c"
            label="Set Reminder"
          />
        </View>
      </View>
      <View style={styles.divider} />
      <View marginH-30 marginB-0 row spread centerV>
        <View row>
          <LockIcon />
          <Text text70 marginL-10>
            Mark as Private
          </Text>
        </View>
        <View>
          <Switch
            onColor={"#ea156c"}
            offColor={"#e1e1e2"}
            marginL-10
            value={event.private}
            onValueChange={(value) =>
              setEvent((prev) => ({ ...prev, private: value }))
            }
          />
        </View>
      </View>
      <View style={styles.divider} />
      <View marginH-30 marginB-0 row spread centerV>
        <View row centerV>
          <MenuIcon />
          <Text text70 marginL-10>
            Add Details
          </Text>
        </View>
        <View></View>
      </View>
    </Dialog>
  );
};

export default EditEventDialog;

const styles = StyleSheet.create({
  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
  gradient: {
    height: "25%",
    position: "absolute",
    bottom: 0,
    width: "100%",
  },
  buttonContainer: {
    position: "absolute",
    bottom: 25,
    width: "100%",
  },
  button: {
    backgroundColor: "rgb(253, 23, 117)",
    paddingVertical: 20,
  },
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
  rotateSwitch: {
    marginLeft: 35,
    marginBottom: 10,
    marginTop: 25,
  },
});