cally/components/pages/feedback/EditFeedback.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 PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import { IFeedback, useFeedbackContext } from "@/contexts/FeedbackContext";
import FeedbackDialog from "./FeedbackDialog";

const EditFeedback = (props: {
  item: IFeedback;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}) => {
  const { updateFeedback, deleteFeedback } = useFeedbackContext();
  const [text, setText] = useState<string>(props.item.text);
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const textRef = useRef<TextFieldRef>(null);

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

  useEffect(() => {
    setText(props.item.text);
  }, []);

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

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

  const handleDeleteNote = () => {
    deleteFeedback(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,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        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");
              updateFeedback(props.item.id, { text: text });
              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 paddingR-20>
        <View paddingT-8 marginR-5>
          <MenuIcon width={20} height={12} />
        </View>
        <TextField
          textAlignVertical="top"
          multiline
          style={styles.description}
          placeholder="Add description"
          numberOfLines={3}
          value={text}
          onChangeText={(value) => {
            setText(value);
          }}
          ref={textRef}
          returnKeyType="done"
        />
      </View>
      <View style={styles.divider} />
      <FeedbackDialog
        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 EditFeedback;