import { useDisclosure } from '@chakra-ui/react';
import RestrictedComponent from 'components/logic/RestrictedComponent';
import NoteModalDialog from 'components/notes/ModalDialog';
import CreateButton from 'components/ui/buttons/Create';
import useDelete from "../../hooks/useDelete";
import useFetch from "../../hooks/useFetch";
import NotesTable from "../notes/Table";
import { IconDocument } from '../ui/Icons';
import Loading from "../ui/Loading";

const ProjectNotesTab = ({ project }) => {
    const [notes, reloadNotes] = useFetch(`/notes?parentType=project&parentId=${project.id}`)
    const deleteNoteById = useDelete('/notes/', reloadNotes)
    const { isOpen, onOpen, onClose } = useDisclosure();

    const onDeleteButtonClick = (ev, note) => {
        ev.preventDefault();

        deleteNoteById(note.id);
    }

    const onNoteFormSaved = () => {
        reloadNotes();
        onClose();
    }

    if (!notes) {
        return <Loading />
    }

    return (
        <section>
            <h4>
                <IconDocument />Project notes

                <RestrictedComponent roles={['administrator', 'superuser', 'user']}>
                    <NoteModalDialog parentType="project" parent={project} isOpen={isOpen} onClose={onNoteFormSaved} onCancel={onClose} />
                    <CreateButton onClick={onOpen}>Add note...</CreateButton>
                </RestrictedComponent>
            </h4>
            <NotesTable notes={notes} onDeleteButtonClick={onDeleteButtonClick} />
        </section>
    )
}

export default ProjectNotesTab;