Untitled

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Col, Form, Input, Modal, Row, Typography } from 'antd';
import './index.scss';

export function TextareaInputModal({
  show = false,
  loading = false,
  defaultData = '',
  onCancel = () => {},
  onSubmit = (value) => {}
}) {
  const [form] = Form.useForm();
  const { t } = useTranslation('translations');
  const [userInput, setUserInput] = useState('');

  useEffect(() => {
    form.setFieldsValue({
      description: defaultData
    });
    setUserInput(''); // Resetea cualquier input del usuario si defaultData cambia
  }, [defaultData]);

  const cancelHandler = () => {
    onCancel();
  };
  const afterCloseHandler = () => {
    /* form.resetFields(); */
  };

  const finishHandler = () => {
    const value = form.getFieldValue('description');
    onSubmit(value);
  };

  const handleTextAreaChange = (e) => {
    const currentInput = e.target.value;

    // Se asegura que solo se pueda agregar texto después de defaultData
    if (currentInput.startsWith(defaultData)) {
      setUserInput(currentInput.slice(defaultData.length));
      form.setFieldsValue({
        description: currentInput
      });
    }
  };

  return (
    <Modal
      onCancel={cancelHandler}
      afterClose={afterCloseHandler}
      open={show}
      closable={false}
      footer={null}
      zIndex={1005}
      width={600}
      height={580}
      className="incident-description-edit-modal"
    >
      <Form form={form} onFinish={finishHandler}>
        <Row>
          <Col span={12}>
            <Typography>{t('despacho.Descripción_incidente')}</Typography>
          </Col>
          <Col span={12}>
            <Button type="primary" htmlType="submit" loading={loading}>
              {t('despacho.save')}
            </Button>
          </Col>
        </Row>
        <Form.Item name="description" className="description-input">
          <Input.TextArea
            maxLength={4000}
            showCount
            onChange={handleTextAreaChange}
            value={`${defaultData}${userInput}`} // Muestra el texto inicial seguido de la entrada del usuario
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default TextareaInputModal;