cally/components/pages/brain_dump/MoveBrainDump.tsx

import React, {useEffect, useRef, useState} from "react";
import {
  Button,
  Dialog,
  View,
  Text,
  TextField,
  TouchableOpacity, TextFieldRef,
} from "react-native-ui-lib";
import { Dimensions, StyleSheet } from "react-native";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
import PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import RemindersIcon from "@/assets/svgs/RemindersIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import BrainDumpDialog from "./BrainDumpDialog";

const MoveBrainDump = (props: {
  item: IBrainDump;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}) => {
  const { updateBrainDumpItem, deleteBrainDump } = useBrainDumpContext();
  const [description, setDescription] = useState<string>(
    props.item.description
  );
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const descriptionRef = useRef<TextFieldRef>(null)

  const { width } = Dimensions.get("screen");

  useEffect(() => {
    updateBrainDumpItem(props.item.id, { description: description });
  }, [description]);

  useEffect(() => {
    if (props.isVisible) {
      setTimeout(() => {
        descriptionRef?.current?.focus()
      }, 500)
    }
  }, [props.isVisible]);

  const showConfirmationDialog = () => {
    setModalVisible(true);
  };

  const handleDeleteNote = () =>{
    deleteBrainDump(props.item.id);
  }

  const hideConfirmationDialog = () => {
    setModalVisible(false);
  }

  return (
    <Dialog
      bottom={true}
      height={"90%"}
      width={width}
      panDirection={PanningDirectionsEnum.DOWN}
      onDismiss={() => props.setIsVisible(false)}
      containerStyle={{
        borderRadius: 15,
        backgroundColor: "white",
        width: "100%",
        alignSelf: "stretch",
        padding: 10,
        paddingTop: 3,
        margin: 0,
      }}
      visible={props.isVisible}
    >
      <View center paddingT-8>
        <TouchableOpacity onPress={() => props.setIsVisible(false)}>
          <DropModalIcon />
        </TouchableOpacity>
      </View>
      <View row spread paddingH-10 paddingB-15>
        <Button
          color="#05a8b6"
          style={styles.topBtn}
          iconSource={() => <CloseXIcon />}
          onPress={() => {
            props.setIsVisible(false);
          }}
        />
        <View row>
          <Button
            style={styles.topBtn}
            marginR-10
            iconSource={() => <PenIcon />}
            onPress={() => {
              console.log("selview");
              props.setIsVisible(false);
            }}
          />
          <Button
            style={styles.topBtn}
            marginL-5
            iconSource={() => <BinIcon />}
            onPress={() => {
              showConfirmationDialog();
            }}
          />
        </View>
      </View>
      <View centerH>
        <Text style={styles.title}>{props.item.title} </Text>
      </View>
      <View style={styles.divider} />
      <View row gap-5>
        <View paddingT-8 marginR-5>
          <MenuIcon width={20} height={12} />
        </View>
        <TextField
          textAlignVertical="top"
          multiline
          fieldStyle={{
            width: "94%",
          }}
          style={styles.description}
          placeholder="Add description"
          numberOfLines={3}
          value={description}
          onChangeText={(value) => {
            setDescription(value);
          }}
          ref={descriptionRef}
          returnKeyType="default"
        />
      </View>
      <View style={styles.divider} />
      <View gap-20>
        <TouchableOpacity>
          <View row centerV>
            <NavToDosIcon
              width={22}
              color={"#919191"}
              style={styles.optionsIcon}
            />
            <Text style={styles.optionsReg}>Move to</Text>
            <Text style={styles.optionsBold}> my to dos</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View row centerV>
            <NavCalendarIcon
              width={22}
              height={22}
              color={"#919191"}
              style={styles.optionsIcon}
            />
            <Text style={styles.optionsReg}>Move to</Text>
            <Text style={styles.optionsBold}> my calendar</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View row centerV>
            <RemindersIcon width={22} style={styles.optionsIcon} />
            <Text style={styles.optionsReg}>Move to</Text>
            <Text style={styles.optionsBold}> my reminders</Text>
          </View>
        </TouchableOpacity>
      </View>
      <BrainDumpDialog visible={modalVisible} title={props.item.title} onDismiss={hideConfirmationDialog} onConfirm={handleDeleteNote} />
    </Dialog>
  );
};

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",
    marginTop: -3,
  },
  rotateSwitch: {
    marginLeft: 35,
    marginBottom: 10,
    marginTop: 25,
  },
  optionsReg: {
    fontSize: 16,
    fontFamily: "PlusJakartaSans_400Regular",
  },
  optionsBold: {
    fontSize: 16,
    fontFamily: "PlusJakartaSans_600SemiBold",
  },
  optionsIcon: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontFamily: "Manrope_500Medium",
  },
  description: {
    fontFamily: "Manrope_400Regular",
    fontSize: 14,
  },
});

export default MoveBrainDump;