cally/components/pages/reminders/addReminderModal.tsx

import { StyleSheet } from "react-native";
import React, { useState } from "react";
import {
  Dialog,
  Text,
  PanningProvider,
  TextField,
  Button,
  View,
  Switch,
  Picker,
} from "react-native-ui-lib";
import ButtonOutlined from "@/components/ui/ButtonOutlined";
import AntDesign from "@expo/vector-icons/AntDesign";
import Feather from "@expo/vector-icons/Feather";
import Ionicons from "@expo/vector-icons/Ionicons";
import { DateTimePicker } from "react-native-ui-lib";
import { TouchableOpacity } from "react-native-gesture-handler";

interface ReminderModalProps {
  visible: boolean;
  onClose: () => void;
  onSave: (newReminder: Reminder) => void;
}

interface Reminder {
  title: string;
  date: Date;
  done: boolean;
  isAutoRepeat: boolean;
  remindIn: string;
}

interface reminderOptions {
  label: string;
  value: string;
}

const AddReminderModal = (props: ReminderModalProps) => {
  const { visible, onClose , onSave } = props;
  const [reminderTitle, setReminderTitle] = useState<string>("");
  const [time, setTime] = useState(new Date());
  const [autoRepeat, setAutoRepeat] = useState<boolean>(false);
  const [reminder, setReminder] = useState<string>("just-in-time");

  const reminderOptions = [
    { label: "Remind me just in time", value: "just-in-time" },
    { label: "Remind me 5 minutes before", value: "5-min-before" },
    { label: "Remind me 10 minutes before", value: "10-min-before" },
    { label: "Remind me 15 minutes before", value: "15-min-before" },
    { label: "Remind me 30 minutes before", value: "30-min-before" },
    { label: "Remind me 1 hour before", value: "1-hr-before" },
    { label: "Remind me 1 day before", value: "1-day-before" },
  ];

  const handleSave = () => {
    const newReminder: Reminder = {
      title: reminderTitle,
      date: time,
      done: false,
      isAutoRepeat: autoRepeat,
      remindIn: reminder
    };
    onSave(newReminder);
    onClose(); 
  };

  const handleDateTimeChange = (selectedTime: Date) => {
    setTime(selectedTime);
  };

  return (
    <Dialog
      visible={visible}
      onDismiss={onClose}
      panDirection={PanningProvider.Directions.RIGHT}
      containerStyle={{ borderRadius: 12, backgroundColor: "white" }}
    >
      <View style={styles.container}>
        <Text style={styles.title}>New Reminder</Text>
        <View style={styles.divider} />
        <View style={styles.inner}>
          <View
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              marginBottom: 10,
            }}
          >
            <Text text70>Profiles</Text>
            <ButtonOutlined
              title={"+ Tag"}
              size={Button.sizes.xSmall}
              onPress={() => {}}
            />
          </View>
          <View style={styles.iconTitle}>
            <View
              style={{
                height: 27,
                width: 27,
                marginRight: 10,
                borderRadius: 50,
                backgroundColor: "#fcf4eb",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Feather name="scissors" size={14} color="black" />
            </View>
            <TextField
              value={reminderTitle}
              onChangeText={(text) => setReminderTitle(text)}
              placeholder="Reminder Title"
              text70L
            />
          </View>
        </View>
        <View style={styles.divider} />
        <View style={styles.inner}>
          <Text text70>Reminder Time</Text>
          <View style={styles.inputsBetween}>
            <DateTimePicker
              migrateDialog
              value={time}
              mode="date"
              leadingAccessory={
                <View>
                  <Feather name="calendar" size={20} color="black" />
                  <View style={{ marginRight: "75%" }} />
                </View>
              }
              onChange={handleDateTimeChange}
              text70
            />
          </View>
          <TouchableOpacity>
            <View style={styles.inputsBetween}>
              <DateTimePicker
                migrateDialog
                value={time}
                mode="time"
                is24Hour={false}
                onChange={handleDateTimeChange}
                leadingAccessory={
                  <View>
                    <AntDesign name="clockcircleo" size={20} color="black" />
                    <View style={{ marginRight: "70%" }} />
                  </View>
                }
                text70
              />
            </View>
          </TouchableOpacity>
          <View style={styles.inputsStart}>
            <Picker
              text70
              value={reminder}
              onChange={(item) => setReminder(item)}
              useDialog
              fieldType="form"
              placeholder="Select a reminder"
              leadingAccessory={
                <Feather
                  name="bell"
                  size={19}
                  color="black"
                  style={{ marginRight: 7 }}
                />
              }
              trailingAccessory={
                <Feather
                  name="chevron-down"
                  style={{ marginLeft: "25%" }}
                  size={22}
                  color="black"
                />
              }
            >
              {reminderOptions.map((option) => (
                <Picker.Item
                  key={option.value}
                  label={option.label}
                  value={option.value}
                />
              ))}
            </Picker>
          </View>
        </View>
        <View style={styles.divider} />
        <View style={styles.inner}>
          <View style={styles.inputsStart}>
            <Ionicons
              name="repeat-sharp"
              size={25}
              color="black"
              style={{ marginRight: 7 }}
            />
            <Text text70>Auto Repeat</Text>
            <Switch
              style={{ marginLeft: "auto" }}
              onColor={"#00c87e"}
              offColor={"gray"}
              value={autoRepeat}
              onValueChange={(value) => setAutoRepeat(value)}
            />
          </View>
        </View>
        <View style={styles.inner} marginT-10>
          <View
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              width: "100%",
            }}
          >
            <Button
              label="Cancel"
              style={styles.button}
              color="black"
              onPress={onClose}
            />
            <Button
              label="Save"
              borderRadius={5}
              backgroundColor="#00c87e"
              style={{ width: "49%" }}
              onPress={handleSave}
            />
          </View>
        </View>
      </View>
    </Dialog>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
  },
  button: {
    backgroundColor: "white",
    color: "black",
    borderColor: "lightgray",
    borderWidth: 1,
    borderRadius: 5,
    padding: 0,
    marginHorizontal: 0,
    width: "49%",
  },
  inner: {
    paddingHorizontal: 20,
    display: "flex",
    flexDirection: "column",
  },
  title: {
    fontSize: 20,
    fontWeight: "400",
    textAlign: "center",
  },
  divider: {
    width: "100%",
    height: 1,
    backgroundColor: "#E0E0E0",
    marginVertical: 10,
  },
  iconTitle: {
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E0E0E0",
    display: "flex",
    flexDirection: "row",
  },
  inputsBetween: {
    paddingVertical: 12,
    paddingHorizontal: 15,
    marginVertical: 5,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E0E0E0",
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  inputsStart: {
    paddingVertical: 12,
    paddingHorizontal: 15,
    marginVertical: 5,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E0E0E0",
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "flex-start",
  },
});

export default AddReminderModal;