cally/components/pages/feedback/AddFeedback.tsx

import {
  Button,
  Dialog,
  TextField,
  TextFieldRef,
  TouchableOpacity,
  View,
} from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { Dimensions, Platform, StyleSheet } from "react-native";

import DropModalIcon from "@/assets/svgs/DropModalIcon";
import KeyboardManager from "react-native-keyboard-manager";
import { useFeedbackContext } from "@/contexts/FeedbackContext";

interface IAddFeedbackProps {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}

const AddFeedback = ({
  addFeedbackProps,
}: {
  addFeedbackProps: IAddFeedbackProps;
}) => {
  const { addFeedback } = useFeedbackContext();
  const [feedback, setFeedback] = useState<string>("");
  const [feedbackTitle, setFeedbackTitle] = useState<string>("");
  const { width } = Dimensions.get("screen");

  const descriptionRef = useRef<TextFieldRef>(null);
  const titleRef = useRef<TextFieldRef>(null);

  const isTitleValid = feedbackTitle.trim().length >= 3;

  useEffect(() => {
    setFeedback("");
    setFeedbackTitle("");
  }, [addFeedbackProps.isVisible]);

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

  useEffect(() => {
    if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(false);
    setFeedbackTitle('');
    setFeedback('');
  }, []);

  return (
    <Dialog
      bottom={true}
      height={"90%"}
      width={width}
      panDirection={PanningDirectionsEnum.DOWN}
      onDismiss={() => addFeedbackProps.setIsVisible(false)}
      containerStyle={styles.dialogContainer}
      visible={addFeedbackProps.isVisible}
    >
      <View row spread style={styles.topBtns} marginB-20>
        <Button
          color="#05a8b6"
          label="Cancel"
          style={styles.topBtn}
          onPress={() => {
            addFeedbackProps.setIsVisible(false);
          }}
        />
        <TouchableOpacity onPress={() => addFeedbackProps.setIsVisible(false)}>
          <DropModalIcon style={{ marginTop: 15 }} />
        </TouchableOpacity>
        <Button
          color="#05a8b6"
          label="Save"
          style={[styles.topBtn, !isTitleValid && styles.disabledBtn]}
          disabled={!isTitleValid}
          onPress={() => {
            if (isTitleValid) {
              addFeedback({
                id: 99,
                title: feedbackTitle.trim(),
                text: feedback.trim(),
              });
              addFeedbackProps.setIsVisible(false);
            }
          }}
        />
      </View>
      <View marginH-20>
        <TextField
          value={feedbackTitle}
          ref={titleRef}
          placeholder="Set Title"
          text60R
          onChangeText={(text) => {
            setFeedbackTitle(text);
          }}
          onSubmitEditing={() => {
            descriptionRef.current?.focus();
          }}
          style={styles.title}
          blurOnSubmit={false}
          returnKeyType="next"
        />
        <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20 />
        <TextField
          ref={descriptionRef}
          value={feedback}
          placeholder="Write Description"
          text70
          onChangeText={(text) => {
            setFeedback(text);
          }}
          style={styles.description}
          multiline
          numberOfLines={4}
          maxLength={255}
          onEndEditing={() => {
            descriptionRef.current?.blur();
          }}
          returnKeyType="done"
        />
      </View>
    </Dialog>
  );
};

const styles = StyleSheet.create({
  dialogContainer: {
    borderTopRightRadius: 15,
    borderTopLeftRadius: 15,
    backgroundColor: "white",
    padding: 0,
    paddingTop: 3,
    margin: 0,
  },
  topBtns: {},
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
  disabledBtn: {
    opacity: 0.2,
  },
  title: {
    fontSize: 22,
    fontFamily: "Manrope_500Medium",
  },
  description: {
    fontFamily: "Manrope_400Regular",
    fontSize: 14,
    textAlignVertical: "top",
  },
});

export default AddFeedback;