DocumentForm.jsx with old useEffect logic in commented section for 79-17

DocumentForm.jsx with old useEffect logic in commented section for 79-17:

import { CommentOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import { App, Button, Checkbox, Collapse, Divider, Form, Input, Modal, Timeline, Tree } from 'antd';
import Title from 'antd/es/typography/Title';
import { isEmpty, isEqual, some } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import ReactQuill from 'react-quill-new';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useFileDrawer } from '../../context/FileDrawerContext';
import { getDocumentTypes } from '../../store/group/groupActions';
import { parseQuillText } from '../../utils';
import { decodeDetails } from '../../utils/pdfUtils';
import withLoadStatus from '../common/withLoadStatus';

const modules = {
  clipboard: {
    matchVisual: false,
  },
  toolbar: {
    container: [
      ['bold', 'italic', 'underline', 'strike'], // Bold, Italic, Underline, Strikethrough
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // Heading sizes
      [{ align: [] }], // Alignment
      [{ list: 'ordered' }, { list: 'bullet' }], // Ordered & unordered lists
      [{ indent: '-1' }, { indent: '+1' }], // Indent & Outdent
      ['clean'], // Clear formatting
    ],
  },
};

const normalizeValue = (value) => {
  return value === '<p><br></p>' ? '' : value;
};

const DocumentForm = ({
  startLoading,
  stopLoading,
  isLoading,
  parentId,
  contextId,
  contextNotes,
  getContextNotes,
  document,
  isEditing,
  updateAction,
  createAction,
  hasChanges,
  setHasChanges,
  fetchDocuments,
}) => {
  const { t } = useTranslation();
  const { modal } = App.useApp();

  const [searchTerm, setSearchTerm] = useState('');

  const [selectedDocument, setSelectedDocument] = useState(document || { noteRefs: [] });
  const [selectedNotes, setSelectedNotes] = useState([]);
  const [selectedFiles, setSelectedFiles] = useState({});
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const [initialFieldValues, setInitialFieldValues] = useState(null);
  const [importedNotes, setImportedNotes] = useState([]);
  const [header, setHeader] = useState(selectedDocument?.header || '');
  const [footer, setFooter] = useState(selectedDocument?.footer || '');
  const { openDrawer } = useFileDrawer();
  const [activeKey, setActiveKey] = useState(null);

  useEffect(() => {
    console.log('Current activeKey:', activeKey);
  }, [activeKey]);

  const handleFormChange = () => {
    if (initialFieldValues) {
      const currentFieldValues = form.getFieldsValue();

      // Normalize values for header and footer
      const normalizedCurrentValues = {
        ...currentFieldValues,
        header: normalizeValue(currentFieldValues.header),
        footer: normalizeValue(currentFieldValues.footer),
      };

      const normalizedInitialValues = {
        ...initialFieldValues,
        header: normalizeValue(initialFieldValues.header),
        footer: normalizeValue(initialFieldValues.footer),
      };

      const hasDifferences = some(
        normalizedCurrentValues,
        (value, key) => value !== normalizedInitialValues[key],
      );

      setHasChanges(hasDifferences);
    }
  };

  useEffect(() => {
    const hasDifferences = !isEqual(selectedDocument.noteRefs, document?.noteRefs || []);

    setHasChanges(hasDifferences);
  }, [selectedDocument.noteRefs, document?.noteRefs]);

  const handleCancel = () => {
    form.resetFields();
    setHasChanges(false);

    if (isEditing) {
      if (document.noteRefs && document.details) {
        const decodedDetails = decodeDetails(document.details);
        const noteRefsMap = new Map(document.noteRefs.map((note) => [note.id, note]));

        const detailedNotes = decodedDetails.map(({ id, note, files, note_activities }) => {
          const noteRef = noteRefsMap.get(id) || {};

          return {
            ...noteRef,
            id,
            note: parseQuillText(note || ''),
            files: files || [],
            subject: noteRef.subject || '',
            note_activities: note_activities || [],
          };
        });

        setImportedNotes(detailedNotes);
      }
    } else {
      setImportedNotes([]);
    }
  };

  /*useEffect(() => {
    const headerKeys = document?.noteRefs?.map((ref) => `header-${ref.id}`) || [];

    const headerValues = headerKeys.reduce((acc, key) => {
      const headerId = key.split('header-')[1];
      const matchingNoteRef = document.noteRefs.find((ref) => ref.id === headerId);
      const noteValue = matchingNoteRef?.note || form.getFieldValue(key) || '';
      acc[key] = noteValue;

      return acc;
    }, {});

    form.setFieldsValue({
      name: document?.name || form.getFieldValue('name') || '',
      header: document?.header || form.getFieldValue('header') || '',
      footer: document?.footer || form.getFieldValue('footer') || '',
      ...headerValues,
    });

    setInitialFieldValues({
      name: document?.name || form.getFieldValue('name') || '',
      header: document?.header || form.getFieldValue('header') || '',
      footer: document?.footer || form.getFieldValue('footer') || '',
      ...headerValues,
    });
  }, [form, document?.name, document?.footer, document?.header, document?.noteRefs]);*/

  useEffect(() => {
    const headerKeys = selectedDocument?.noteRefs?.map((ref) => `header-${ref.id}`) || [];

    const headerValues = headerKeys.reduce((acc, key) => {
      const headerId = key.split('header-')[1];
      const matchingNoteRef = selectedDocument?.noteRefs?.find((ref) => ref.id === headerId) || {};
      const noteValue = matchingNoteRef?.note || form.getFieldValue(key) || '';
      acc[key] = noteValue;
      return acc;
    }, {});

    const initialValues = {
      name: selectedDocument?.name || '',
      header: selectedDocument?.header || '',
      footer: selectedDocument?.footer || '',
      ...headerValues,
    };

    form.setFieldsValue(initialValues);
    setInitialFieldValues(initialValues);
  }, [form, selectedDocument, setInitialFieldValues]);

  useEffect(() => {
    if (!isEqual(importedNotes, selectedDocument.noteRefs)) {
      if (selectedDocument.noteRefs && selectedDocument.details) {
        const decodedDetails = decodeDetails(selectedDocument.details);
        const noteRefsMap = new Map(selectedDocument.noteRefs.map((note) => [note.id, note]));

        const detailedNotes = decodedDetails.map(({ id, note, files, note_activities }) => {
          const noteRef = noteRefsMap.get(id) || {};

          return {
            ...noteRef,
            id,
            note: note || '',
            files: files || [],
            subject: noteRef.subject || '',
            note_activities: note_activities || [],
          };
        });

        setImportedNotes(detailedNotes); // Samo ako ima razlike
      }
    }
  }, [selectedDocument, importedNotes]);

  const handleQuillChange = (key, content) => {
    if (key === 'header') {
      setHeader(content);
    } else if (key === 'footer') {
      setFooter(content);
    } else {
      // Update the notes state for specific note ID
      setImportedNotes((prevNotes) =>
        prevNotes.map((note) => (note.id === key ? { ...note, note: content } : note)),
      );
    }
  };

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = async () => {
    setSearchTerm('');
    await dispatch(getContextNotes(parentId));
    setIsModalOpen(true);
  };

  const handleOk = () => {
    // Create an array to hold the note references with selected files
    const newNoteRefs = contextNotes
      .filter((note) => selectedNotes.includes(note.id)) // Filter notes based on selected notes
      .map((note) => ({
        ...note, // Spread the whole note object
        files: note.files.filter((file) => selectedFiles[note.id]?.includes(file.id)), // Filter files based on selected file IDs
      }));

    const existingNotes = decodeDetails(selectedDocument.details) || [];

    // Combine existing notes with new notes, ensuring uniqueness based on id
    const combinedNotes = [
      ...existingNotes,
      ...importedNotes.map((note) => ({
        //za orderanje u docs edit
        id: note.id,
        note: note.note || '',
        files: note.files,
        note_activities: note.note_activities,
      })),
    ];

    // Create the new details string from the combined notes
    const updatedDetails = !isEmpty(combinedNotes)
      ? `<ul>${combinedNotes
          .map(
            (note) =>
              `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
              ${
                !isEmpty(note.files) &&
                `<ul>${note.files
                  .map((file) => {
                    return `<li data-file-name="${file.name}" data-file-description="${
                      file.description || ''
                    }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                      file.name
                    }</li>`;
                  })
                  .join('')}</ul>`
              }
              ${
                !isEmpty(note.note_activities) &&
                `<ul>${note.note_activities
                  .map((activity) => {
                    return `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`;
                  })
                  .join('')}</ul>`
              }
          </li>`,
          )
          .join('')}</ul>`
      : '';

    // Set the selectedDocument with the noteRefs
    setSelectedDocument((prevDocument) => ({
      ...prevDocument,
      noteRefs: [...newNoteRefs, ...importedNotes.map((note) => ({ id: note.id, ...note }))],

      details: updatedDetails,
    }));

    setIsModalOpen(false);
    setSelectedNotes([]);
    setSelectedFiles({});
  };

  const handleModalCancel = () => {
    setIsModalOpen(false);
    setSelectedNotes([]);
    setSelectedFiles({});
  };

  const handleCollapseChange = (key) => {
    console.log('Toggling activeKey:', key);
    setActiveKey(key);
  };

  const handleNoteCheckboxChange = (noteId) => {
    const isNoteSelected = selectedNotes.includes(noteId);
    const updatedSelectedNotes = isNoteSelected
      ? selectedNotes.filter((id) => id !== noteId) // Uncheck if already selected
      : [...selectedNotes, noteId]; // Check if not selected

    // Update the selected files based on note selection
    const updatedSelectedFiles = { ...selectedFiles };

    if (isNoteSelected) {
      // If note is being unchecked, remove all files
      delete updatedSelectedFiles[noteId];
    } else {
      // If note is being checked, select all files
      const filesToSelect = contextNotes
        .find((note) => note.id === noteId)
        ?.files.map((file) => file.id); // Use file.id
      if (filesToSelect) {
        updatedSelectedFiles[noteId] = filesToSelect; // Add all file IDs
      }
    }

    // Update selected files to ensure files are selected based on their notes
    selectedNotes.forEach((selectedNoteId) => {
      // Initialize array if it doesn't exist
      if (!updatedSelectedFiles[selectedNoteId]) {
        updatedSelectedFiles[selectedNoteId] = [];
      }
    });

    setSelectedNotes(updatedSelectedNotes);
    setSelectedFiles(updatedSelectedFiles);
  };

  const handleFileCheckboxChange = (noteId, fileId) => {
    // Change fileName to fileId
    const updatedSelectedFiles = {
      ...selectedFiles,
      [noteId]: selectedFiles[noteId]
        ? selectedFiles[noteId].includes(fileId) // Change to fileId
          ? selectedFiles[noteId].filter((id) => id !== fileId) // Change to fileId
          : [...(selectedFiles[noteId] || []), fileId] // Change to fileId
        : [fileId], // Change to fileId
    };

    // Update the selected notes if files are being checked and the note is not already selected
    const updatedSelectedNotes = Object.keys(updatedSelectedFiles).reduce((acc, id) => {
      if (updatedSelectedFiles[id].length > 0 && !acc.includes(id)) {
        acc.push(id); // Add noteId if at least one file is selected
      }
      return acc;
    }, selectedNotes);

    setSelectedFiles(updatedSelectedFiles);
    setSelectedNotes(updatedSelectedNotes);
  };

  const items = useMemo(() => {
    return contextNotes.map((note) => {
      const totalFiles = note.files.length;
      const selectedFileCount = selectedFiles[note.id]?.length || 0;
      const isIntermediate = selectedFileCount > 0 && selectedFileCount < totalFiles;

      return {
        key: note.id,
        label: (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Checkbox
              checked={selectedNotes.includes(note.id)}
              indeterminate={isIntermediate}
              onChange={() => handleNoteCheckboxChange(note.id)}
              onClick={(e) => e.stopPropagation()}
            />
            <Title level={4} style={{ margin: '0 0 0 8px' }}>
              {note.subject}
            </Title>
          </div>
        ),
        children: (
          <div style={{ paddingLeft: '20px' }}>
            <div dangerouslySetInnerHTML={{ __html: parseQuillText(note.note) }} />
            <div>
              {note.files.map((file) => (
                <Checkbox
                  key={file.id}
                  checked={selectedFiles[note.id]?.includes(file.id)}
                  onChange={() => handleFileCheckboxChange(note.id, file.id)}
                >
                  {file.name}
                </Checkbox>
              ))}
            </div>
          </div>
        ),
      };
    });
  }, [contextNotes, selectedNotes, selectedFiles]);

  const filteredItems = useMemo(() => {
    return items.filter((item) =>
      item.label.props.children[1].props.children.toLowerCase().includes(searchTerm.toLowerCase()),
    );
  }, [items, searchTerm]);

  const treeData = useMemo(() => {
    // Ensure selectedDocument is not null or undefined before accessing noteRefs
    if (!selectedDocument || !selectedDocument.noteRefs) return [];

    // Map through all noteRefs and create a unique tree structure for each note's files
    return selectedDocument.noteRefs.map((note) => ({
      noteId: note.id,
      files: note.files.map((file) => ({
        title: file.name,
        key: file.id,
        ...file,
      })),
    }));
  }, [selectedDocument]);

  const handleFileClick = (fileId, noteId) => {
    if (Array.isArray(fileId) && fileId.length === 1) {
      const fileToDownload = selectedDocument.noteRefs
        .flatMap((note) => note.files)
        .find((file) => file.id === fileId[0]);

      if (fileToDownload) {
        openDrawer({
          file: { ...fileToDownload },
          parentId: noteId,
        });
      }
    }
  };

  const handleSubmit = async (values) => {
    startLoading();
    const response = await dispatch(getDocumentTypes()).unwrap();

    const details = !isEmpty(importedNotes)
      ? `<ul>${importedNotes
          .map(
            (note) => `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
          ${
            !isEmpty(note.files) &&
            `<ul>${note.files
              .map((file) => {
                return `<li data-file-name="${file.name}" data-file-description="${
                  file.description || ''
                }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                  file.name
                }</li>`;
              })
              .join('')}</ul>`
          }
          ${
            !isEmpty(note.note_activities) &&
            `<ul>${note.note_activities
              .map(
                (activity) =>
                  `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`,
              )
              .join('')}</ul>`
          }
        </li>`,
          )
          .join('')}</ul>`
      : '';

    /*const updatedNoteRefs = importedNotes.map((note) => ({
      ...note,
      note: note.note || '',
    }));*/

    const { name } = values;

    const document = {
      name,
      header,
      footer,
      details,
      type: response,
      //noteRefs: updatedNoteRefs,
      noteRefs: importedNotes.map((note) => ({ id: note.id, ...note })), //za orderanje u docs edit
      link: 'link',
      version: selectedDocument.version || 1,
    };

    if (isEditing) {
      await dispatch(
        updateAction({
          parentId,
          contextId,
          document,
          successMessage: t('notifications.company.notes.update'),
        }),
      ).unwrap();
    } else {
      await dispatch(
        createAction({
          contextId,
          document,
          successMessage: t('notifications.company.notes.create'),
        }),
      ).unwrap();
    }

    await dispatch(fetchDocuments(contextId)).unwrap();
    stopLoading();
    setHasChanges(false);
    if (!isEditing) navigate(-1);
  };

  const showCommentDeleteConfirm = (noteId) => {
    modal.confirm({
      title: t('document.form.deleteModalTitle'),
      icon: <ExclamationCircleOutlined />,
      content: t('document.form.deleteModalContent'),
      okText: t('button.delete'),
      okType: 'danger',
      cancelText: t('button.cancel'),
      onOk() {
        handleDeleteNoteComment(noteId);
      },
    });
  };

  const handleDeleteNoteComment = (noteId) => {
    const existingNotes = decodeDetails(selectedDocument.details) || [];

    /*const updatedNoteRefs = selectedDocument.noteRefs.map((note) => {
      if (note.id === noteId) {
        return {
          ...note,
          note_activities: [],
        };
      }
      return note;
    });*/

    const updatedExistingNotes = existingNotes.map((note) => {
      if (note.id === noteId) {
        return {
          ...note,
          note_activities: [],
        };
      }
      return note;
    });

    const updatedDetails = `<ul>${updatedExistingNotes
      .map(
        (note) => `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
        ${
          !isEmpty(note.files) &&
          `<ul>${note.files
            .map((file) => {
              return `<li data-file-name="${file.name}" data-file-description="${
                file.description || ''
              }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                file.name
              }</li>`;
            })
            .join('')}</ul>`
        }
        ${
          !isEmpty(note.note_activities) &&
          `<ul>${note.note_activities
            .map((activity) => {
              return `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`;
            })
            .join('')}</ul>`
        }
      </li>`,
      )
      .join('')}</ul>`;

    setSelectedDocument({
      ...selectedDocument,
      noteRefs: selectedDocument.noteRefs.map((note) =>
        note.id === noteId ? { ...note, note_activities: [] } : note,
      ),
      details: updatedDetails,
    });
  };

  const showDeleteConfirm = (noteId) => {
    modal.confirm({
      title: t('document.form.deleteModalTitle'),
      icon: <ExclamationCircleOutlined />,
      content: t('document.form.deleteModalContent'),
      okText: t('button.delete'),
      okType: 'danger',
      cancelText: t('button.cancel'),
      onOk() {
        handleDeleteNote(noteId);
      },
    });
  };

  const handleDeleteNote = (noteId) => {
    const existingNotes = decodeDetails(selectedDocument.details) || [];

    //const updatedNoteRefs = selectedDocument.noteRefs.filter((note) => note.id !== noteId);

    const updatedExistingNotes = existingNotes.filter((note) => note.id !== noteId);

    const updatedDetails = `<ul>${updatedExistingNotes
      .map(
        (note) => `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
        ${
          !isEmpty(note.files) &&
          `<ul>${note.files
            .map((file) => {
              return `<li data-file-name="${file.name}" data-file-description="${
                file.description || ''
              }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                file.name
              }</li>`;
            })
            .join('')}</ul>`
        }
        ${
          !isEmpty(note.note_activities) &&
          `<ul>${note.note_activities
            .map((activity) => {
              return `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`;
            })
            .join('')}</ul>`
        }
      </li>`,
      )
      .join('')}</ul>`;

    setSelectedDocument({
      ...selectedDocument,
      noteRefs: selectedDocument.noteRefs.filter((note) => note.id !== noteId),
      details: updatedDetails,
    });
  };

  const formatedActivities = (note) => {
    return note.note_activities
      ?.slice()
      .sort((a, b) => new Date(b.completed_at) - new Date(a.completed_at))
      .map((activity) => ({
        dot: <CommentOutlined />,
        children: (
          <div>
            <div>{activity.comment}</div>
            <div className='mt-3 text-xs'>
              {new Date(activity.completed_at).toLocaleString()} - {activity.created_by}
            </div>
          </div>
        ),
      }));
  };

  return (
    <Form
      name='document'
      form={form}
      labelCol={{
        xs: { span: 24 },
        md: { span: 6 },
      }}
      wrapperCol={{
        xs: { span: 24 },
        md: { span: 18 },
      }}
      labelAlign='left'
      layout='horizontal'
      initialValues={{
        remember: true,
      }}
      onValuesChange={handleFormChange}
      onFinish={handleSubmit}
      autoComplete='on'
      className='max-w-[60rem]'
    >
      <Modal
        title={t('document.form.modalTitle')}
        open={isModalOpen}
        onOk={handleOk}
        okText='Import'
        onCancel={handleModalCancel}
        width='50vw'
        bodyStyle={{
          maxHeight: '70vh',
          overflowY: 'auto',
        }}
      >
        <Input
          placeholder={t('document.form.searchNotes')}
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          allowClear
          style={{ marginBottom: '1rem' }}
        />
        <Collapse
          accordion
          activeKey={activeKey}
          onChange={handleCollapseChange}
          expandIconPosition='end'
        >
          {filteredItems.map((item) => (
            <Collapse.Panel
              header={item.label}
              key={item.key}
              style={{
                maxHeight: '300px',
                overflowY: 'auto',
              }}
            >
              {item.children}
            </Collapse.Panel>
          ))}
        </Collapse>
      </Modal>

      <Title level={2}>{t('document.form.headerInfo')}</Title>
      <Form.Item
        label={t('document.form.documentInputLabel')}
        tooltip={t('document.form.documentInputTooltip')}
        name='name'
        className='custom-form-item'
        validateTrigger='onBlur'
        initialValue={document?.name || ''}
        rules={[
          {
            required: true,
            message: 'Please input the document name!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t('document.form.headerInputLabel')}
        tooltip={t('document.form.headerInputTooltip')}
        name='header'
        className='custom-form-item'
        validateTrigger='onBlur'
        initialValue={document?.header || ''}
      >
        <ReactQuill
          theme='snow'
          placeholder={'Your header text goes here...'}
          value={header}
          onChange={(content) => handleQuillChange('header', content)}
          modules={modules}
        />
      </Form.Item>
      <Divider />

      <div className='flex justify-between'>
        <Title level={2} className='inline-block w-full'>
          {t('document.form.details')}
        </Title>
        <div className='my-6 flex w-full justify-end'>
          <Button type='primary' onClick={showModal}>
            {t('button.importNotes')}
          </Button>
        </div>
      </div>

      <DragDropContext
        onDragEnd={(result) => {
          if (!result.destination) return;

          const reorderedNotes = Array.from(importedNotes);
          const [removed] = reorderedNotes.splice(result.source.index, 1);
          reorderedNotes.splice(result.destination.index, 0, removed);

          // Ažuriraj importedNotes
          setImportedNotes(reorderedNotes);

          // Ažuriraj vrijednosti forme
          const updatedFields = reorderedNotes.reduce((acc, note) => {
            acc[`header-${note.id}`] = note.note || '';
            return acc;
          }, {});
          form.setFieldsValue(updatedFields);

          // Ažuriraj selectedDocument sa novim redoslijedom
          setSelectedDocument((prevDocument) => ({
            ...prevDocument,
            noteRefs: reorderedNotes.map((note) => ({ id: note.id, ...note })),
          }));
        }}
      >
        <Droppable droppableId='notesList'>
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef}>
              {importedNotes.map((note, index) => (
                <Draggable key={note.id} draggableId={note.id} index={index}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        ...provided.draggableProps.style,
                        marginBottom: '1rem',
                        padding: '10px',
                        background: '#f0f0f0',
                        borderRadius: '5px',
                      }}
                    >
                      {/* Gumb za brisanje */}
                      <div className='mb-2 flex items-center justify-end'>
                        <Button
                          type='text'
                          danger
                          onClick={() => showDeleteConfirm(note.id)}
                          icon={<DeleteOutlined />}
                        >
                          {t('button.delete')}
                        </Button>
                      </div>

                      {/* ReactQuill za unos teksta */}
                      <Form.Item
                        label={note.subject}
                        tooltip={t('document.form.headerInputTooltip')}
                        name={`header-${note.id}`}
                        className='custom-form-item'
                        validateTrigger='onBlur'
                        initialValue={note.note || ''}
                      >
                        <ReactQuill
                          theme='snow'
                          placeholder='Your text goes here...'
                          value={note.note || ''}
                          onChange={(content) => handleQuillChange(note.id, content)}
                          modules={modules}
                        />
                      </Form.Item>

                      {/* Prikazivanje datoteka */}
                      {!isEmpty(treeData.find((data) => data.noteId === note.id)?.files || []) && (
                        <Form.Item label={t('document.form.attachedFilesInputLabel')} key={note.id}>
                          <Tree
                            className='-ml-6'
                            treeData={treeData.find((data) => data.noteId === note.id)?.files || []}
                            height={300}
                            onSelect={(fileId) => handleFileClick(fileId, note.id)}
                          />
                        </Form.Item>
                      )}

                      {/* Prikazivanje komentara */}
                      {!isEmpty(formatedActivities(note)) && (
                        <>
                          <div className='mb-2 flex items-center justify-end'>
                            <Button
                              type='text'
                              danger
                              onClick={() => showCommentDeleteConfirm(note.id)}
                              icon={<DeleteOutlined />}
                            >
                              {t('button.delete')}
                            </Button>
                          </div>
                          <Form.Item label='Comments' key={note.id}>
                            <Timeline
                              className='max-h-[15rem] overflow-y-auto px-5 pt-1'
                              items={formatedActivities(note)}
                            />
                          </Form.Item>
                        </>
                      )}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>

      <Divider />

      <Title level={2}>{t('document.form.footerInfo')}</Title>
      <Form.Item
        label={t('document.form.footerInputLabel')}
        tooltip={t('document.form.footerInputTooltip')}
        name='footer'
        className='custom-form-item'
        validateTrigger='onBlur'
        initialValue={document?.footer || ''}
      >
        <ReactQuill
          theme='snow'
          placeholder='Your footer text goes here...'
          value={footer}
          onChange={(content) => handleQuillChange('footer', content)}
          modules={modules}
        />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          xs: { offset: 0, span: 24 },
          md: { offset: 6, span: 18 },
        }}
      >
        <Button
          type='primary'
          htmlType='submit'
          className='w-full md:w-auto'
          loading={isLoading}
          disabled={!hasChanges}
        >
          {isEditing ? t('button.update') : t('button.create')}
        </Button>
        <Button htmlType='button' className='mt-2 w-full md:ml-3 md:w-auto' onClick={handleCancel}>
          {t('button.cancel')}
        </Button>
      </Form.Item>
    </Form>
  );
};

export default withLoadStatus(DocumentForm);