solve();
function solve () {
    const baseUrl = 'http://localhost:3030/jsonstore/tasks/';

    const inputDomSelectors = {
        courseName: document.getElementById('course-name'),
        type: document.getElementById('course-type'),
        description: document.getElementById('description'),
        teacher: document.getElementById('teacher-name')
    }
    const otherDomSelectors = {
        addCourse: document.getElementById('add-course'),
        editCourse: document.getElementById('edit-course'),
        loadCourse: document.getElementById('load-course'),
        form: document.getElementById('form')

    }

    const mainDiv = document.getElementById('list');
    let currentCourse =[];
    let courseToEdit = {};

    otherDomSelectors.addCourse.addEventListener('click',addCourseHandler);
    otherDomSelectors.editCourse.addEventListener('click',editCourseHandler);
    otherDomSelectors.loadCourse.addEventListener('click',loadCourseHandler);

    function addCourseHandler (event) {
        if (event) {
            event.preventDefault();
        }
        mainDiv.innerText='';
        const { courseName, type, description, teacher  } = inputDomSelectors;
        const payload = JSON.stringify({courseName: courseName.value,type:type.value,description: description.value,teacher: teacher.value})
        const httpHeader = {
            method: 'POST',
            body: payload
        };
        fetch(baseUrl,httpHeader)
            .then(()=> {
                loadCourseHandler();
                Object.values(inputDomSelectors).forEach((input)=>input.value='');
            })
            .catch((err) => {
                console.log(err)
            })

    }
    function editCourseHandler (event) {
        if (event) {
            event.preventDefault();
        }
        const { courseName, type, description, teacher, _id  } = inputDomSelectors;
        const payload = JSON.stringify({courseName: courseName.value,type:type.value,description: description.value,teacher: teacher.value, _id})
        const httpHeader = {
            method: 'PUT',
            body: payload
        }
        fetch(`${baseUrl}${courseToEdit._id}`,httpHeader)
            .then(()=> {
                loadCourseHandler();
            })
            .catch((err)=> {
                console.log(err)
            })
        otherDomSelectors.addCourse.disabled = false;
        otherDomSelectors.editCourse.disabled = true;




    }
    function loadCourseHandler (event) {
        if (event) {event.preventDefault()
        }

        otherDomSelectors.editCourse.disabled=true;
        mainDiv.innerText = '';

        fetch(baseUrl)
            .then((res) =>res.json())
            .then((allCoursesRes) => {
                currentCourse = Object.values(allCoursesRes);
                for (const { courseName, type, description, teacher, _id } of currentCourse) {
                    const div = createEl('div',mainDiv,"",['container']);
                    div.id = _id;
                    createEl('h2',div,courseName);
                    createEl('h3',div,teacher);
                    createEl('h3',div,type);
                    createEl('h4',div, description);
                    const editBtn = createEl('button',div,'Edit Course',['edit-btn']);
                    const finishBtn = createEl('button',div,'Finish Course',['finish-btn'])
                    editBtn.addEventListener('click',editBtnHandler);
                    finishBtn.addEventListener('click',finishBtnHandler);
                }
            })

    }
    function editBtnHandler (event) {
        if (event) {
            event.preventDefault();
        }

        otherDomSelectors.addCourse.disabled = true;
        otherDomSelectors.editCourse.disabled = false;

        const id = event.currentTarget.parentNode.id;
        courseToEdit = currentCourse.find((c)=> c._id === id);
        for (const key in inputDomSelectors) {
            inputDomSelectors[key].value = courseToEdit[key];
        }
    }

    function finishBtnHandler (event) {
        if(event) {
            event.preventDefault()
        }
        const id = event.currentTarget.parentNode.id;
        let httpHeader = {
            method: 'DELETE'
        }
        fetch(`${baseUrl}${id}`,httpHeader)
            .then(()=>loadCourseHandler())
            .catch((err)=>{
                console.log(err)
            })
    }

    function createEl(type, parentNode, content, classes, id, attributes, useInnerHtml) {
        const htmlEl = document.createElement(type);

        if (content && useInnerHtml) {
            htmlEl.innerHTML = content;
        } else {
            if (content && type !== 'input') {
                htmlEl.textContent = content;
            }
            if (content && type === 'input') {
                htmlEl.value = content;
            }
        }

        if (classes && classes.length > 0) {
            htmlEl.classList.add(...classes);
        }

        if (id) {
            htmlEl.id = id;
        }

        if (attributes) {
            for (const key in attributes) {
                htmlEl.setAttribute(key, attributes[key]);
            }
        }

        if (parentNode) {
            parentNode.appendChild(htmlEl);
        }

        return htmlEl;


    }
}