cally/components/pages/todos/AddChore.tsx

import { StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import {
  Button,
  ButtonSize,
  View,
  Text,
  ActionSheet,
  TextField,
  Dialog,
  Slider,
  NumberInput,
  NumberInputData,
  DateTimePicker,
  Switch,
  Picker,
} from "react-native-ui-lib";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { setDate } from "date-fns";
import PointsSlider from "@/components/shared/PointsSlider";

const AddChore = () => {
  const { addToDo, toDos } = useToDosContext();

  const [isVisible, setIsVisible] = useState<boolean>(false);

  const [newTitle, setNewTitle] = useState<string>("");
  const [points, setPoints] = useState<number>(10);
  const [choreDate, setChoreDate] = useState<Date | null>(new Date());
  const [rotate, setRotate] = useState<boolean>(false);
  const [repeatType, setRepeatType] = useState<string>("Every week");

  const handleChange = (text: string) => {
    const numericValue = parseInt(text, 10);

    if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
      setPoints(numericValue);
    } else if (text === "") {
      setPoints(0);
    }
  };

  return (
    <LinearGradient
      colors={["transparent", "#f9f8f7"]}
      locations={[0, 0.5]}
      style={styles.gradient}
    >
      <View style={styles.buttonContainer}>
        <Button
          marginH-25
          size={ButtonSize.large}
          style={styles.button}
          onPress={() => setIsVisible(!isVisible)}
        >
          <AntDesign name="plus" size={24} color="white" />
          <Text white text60R marginL-10>
            Create new chore
          </Text>
        </Button>
      </View>
      <Dialog
        bottom={true}
        height={"90%"}
        panDirection={PanningDirectionsEnum.DOWN}
        onDismiss={() => setIsVisible(false)}
        containerStyle={{
          borderRadius: 10,
          backgroundColor: "white",
          width: "100%",
          alignSelf: "stretch",
          padding: 0,
          paddingTop: 3,
          margin: 0,
        }}
        visible={isVisible}
      >
        <View row spread>
          <Button
            color="#05a8b6"
            style={styles.topBtn}
            label="Cancel"
            onPress={() => {
              setIsVisible(false);
            }}
          />
          <Button
            style={styles.topBtn}
            iconSource={() => (
              <Feather name="chevron-down" size={24} color="black" />
            )}
            onPress={() => {
              setIsVisible(false);
            }}
          />
          <Button
            color="#05a8b6"
            style={styles.topBtn}
            label="Save"
            onPress={() => {
              addToDo({
                id: 0,
                title: newTitle,
                done: false,
                date: choreDate,
                points: points,
                rotate: rotate,
                repeatType: repeatType,
              });
              setIsVisible(false);
              console.log(toDos);
            }}
          />
        </View>
        <TextField
          placeholder="Add a To Do"
          value={newTitle}
          onChangeText={(text) => {
            setNewTitle(text);
          }}
          placeholderTextColor="#2d2d30"
          text60R
          marginT-15
          marginL-30
        />
        <View style={styles.divider} marginT-8 />
        <View marginL-30 centerV>
          <View row marginB-10>
            {choreDate && (
              <View row centerV>
                <Feather name="calendar" size={25} color="#919191" />
                <DateTimePicker
                  value={choreDate}
                  text70
                  marginL-8
                  onChange={(date) => {
                    setChoreDate(date);
                  }}
                />
              </View>
            )}
          </View>
          <View row centerV>
            <AntDesign name="clockcircleo" size={24} color="#919191" />
            <Picker
              marginL-8
              placeholder="Select Repeat Type"
              value={repeatType}
              onChange={(value) => {
                if (value) {
                  if (value.toString() == "None") {
                    setChoreDate(null);
                    setRepeatType("None");
                  } else {
                    setRepeatType(value.toString());
                    setChoreDate(new Date());
                  }
                }
              }}
              topBarProps={{ title: "Repeat" }}
              style={{ marginVertical: 5 }}
            >
              {repeatOptions.map((option) => (
                <Picker.Item
                  key={option.value}
                  label={option.label}
                  value={option.value}
                />
              ))}
            </Picker>
          </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 row centerV style={styles.rotateSwitch}>
          <Text text80>Take Turns</Text>
          <Switch
            onColor={"#ea156c"}
            value={rotate}
            marginL-10
            onValueChange={(value) => setRotate(value)}
          />
        </View>
        <View style={styles.divider} />
        <View marginH-30 marginB-15 row centerV>
          <Ionicons name="gift-outline" size={25} color="#919191" />
          <Text text70BL marginL-10>
            Reward Points
          </Text>
        </View>
        <PointsSlider
          points={points}
          setPoints={setPoints}
          handleChange={handleChange}
        />
      </Dialog>
    </LinearGradient>
  );
};

export default AddChore;

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,
  },
});