const BASE_URL = 'http://localhost:3030/jsonstore/tasks/';
const loadCoursesBtn = document.getElementById('load-course');
const listDiv = document.getElementById('list');
const addCourseBtn = document.getElementById('add-course');
const form = document.querySelector('#form form');
const editCourseBtn = document.getElementById('edit-course');
 let array = [];
 let obj = {};
let editCourseId = null;
const inputSelectors = {
    titleInput: document.getElementById('course-name'),
    typeInput: document.getElementById('course-type'),
    descriptionInput: document.getElementById('description'),
    teacherInput: document.getElementById('teacher-name')
}

loadCoursesBtn.addEventListener('click', loadAllCourses);
addCourseBtn.addEventListener('click', addCourse);
editCourseBtn.addEventListener('click', editCourse);


function loadAllCourses(e) {
    if (e) {
        e.preventDefault();
    }
    listDiv.innerHTML = '';

    fetch(BASE_URL)
        .then((res) => res.json())
        .then((data) => {
            array = Object.values(data);
            for (const { title, type, description, teacher, _id } of Object.values(data)) {

                const newDiv = createElements('div', '', false, listDiv, _id, ['container']);
                const titleH2 = createElements('h2', title, false, listDiv);
                const teacherH3 = createElements('h3', teacher, false, listDiv);
                const courseType = createElements('h3', type, false, listDiv);
                const descriptionP = createElements('p', description, false, listDiv);
                const editInnerBtn = createElements('button', 'Edit Course', false, listDiv, '', ['edit-btn']);

                const finishBtn = createElements('button', 'Finish Course', false, listDiv, '', ['finish-btn']);
                finishBtn.addEventListener('click', finishCourse);

                editInnerBtn.addEventListener('click', getForEditCourse)
            }

        })
        .catch((err) => {
            console.error(err);
        })
}

function addCourse(e) {
    if (e) {
        e.preventDefault();
    }
    const title = inputSelectors.titleInput.value;
    const type = inputSelectors.typeInput.value;
    const description = inputSelectors.descriptionInput.value;
    const teacher = inputSelectors.teacherInput.value;
    if (title && type && description && teacher) {
        const httpHeaders = {
            method: 'POST',
            body: JSON.stringify({
                title: title,
                type: type,
                description: description,
                teacher: teacher
            })
        }

        fetch(BASE_URL, httpHeaders)
            .then(() => {
                loadAllCourses();
                form.reset();
            })
            .catch((err) => {
                console.error(err);
            })
    }


}



function editCourse(e) {
    if (e) {
        e.preventDefault();
    }
    const title = inputSelectors.titleInput.value;
    const type = inputSelectors.typeInput.value;
    const description = inputSelectors.descriptionInput.value;
    const teacher = inputSelectors.teacherInput.value;
    const httpHeaders = {
        method: 'PATCH',
        body: JSON.stringify({
            title: title,
            type: type,
            description: description,
            teacher: teacher
        })
    }
    fetch(`${BASE_URL}${editCourseId}`, httpHeaders)
        .then((res) => res.json())
        .then(() => {
            loadAllCourses();
            editCourseBtn.setAttribute('disabled', true);
            addCourseBtn.removeAttribute('disabled');
            form.reset();
            // otherDOMSelectors.editBtn.setAttribute('disabled', true);
            // otherDOMSelectors.addBtn.removeAttribute('disabled');
            // otherDOMSelectors.form.reset();
        })
        .catch((err) => {
            console.error(err);
        })
}

function getForEditCourse(e) {
    // const parentElement = this.parentNode;
    editCourseId = e.currentTarget.parentNode._id;
      obj = array.find(x => x._id === id);
    for (const key in inputSelectors) {
        inputSelectors[key].value = obj[key];
    }
    addCourseBtn.disabled = true;
    editCourseBtn.removeAttribute('disabled');
    // otherDOMSelectors.editBtn.removeAttribute('disabled');
    e.currentTarget.parentNode.remove();
}

function finishCourse() {
    const id = this.parentNode._id;

    const httpHeaders = {
        method: 'DELETE'
    }

    fetch(`${BASE_URL}${id}`, httpHeaders)
        .then(() => {
            loadAllCourses();
        })
        .catch((err) => {
            console.error(err);
        })
}


// const BASE_URL = 'http://localhost:3030/jsonstore/tasks/';
// let inputsObj = [];
// let courseToBeUpdated = {};

// const inputDOMSelectors ={
//     title: document.getElementById('course-name'),
//     type: document.getElementById('course-type'),
//     description: document.getElementById('description'),
//     teacher: document.getElementById('teacher-name')
// }

// const otherDOMSelectors ={
//     form: document.querySelector('#form form'),
//     addBtn: document.getElementById('add-course'),
//     editBtn: document.getElementById('edit-course'),
//     loadBtn: document.getElementById('load-course'),
//     coursesContainer: document.getElementById('list')
// }

// otherDOMSelectors.loadBtn.addEventListener('click', loadAllCourses);
// otherDOMSelectors.editBtn.addEventListener('click', editCourse);
// otherDOMSelectors.addBtn.addEventListener('click', addNewCourse);

// function addNewCourse(event){
//     if(event){
//         event.preventDefault();
//     }
//     const newCourse = {
//         title: inputDOMSelectors.title.value,
//         type: inputDOMSelectors.type.value,
//         description: inputDOMSelectors.description.value,
//         teacher: inputDOMSelectors.teacher.value,
//     }
//     httpHeaders ={
//         method: 'POST',
//         body: JSON.stringify(newCourse)
//     }

//     fetch(BASE_URL, httpHeaders)
//     .then(() =>{
//         loadAllCourses();
//         otherDOMSelectors.form.reset();
//     })
//     .catch((err) => {
//         console.error(err);
//     })

// }

// function editCourse(event){
//     if(event){
//         event.preventDefault();
//     }
//     const payload = {
//         title: inputDOMSelectors.title.value,
//         type: inputDOMSelectors.type.value,
//         description: inputDOMSelectors.description.value,
//         teacher: inputDOMSelectors.teacher.value,
//     }
//     httpHeaders ={
//         method: 'PATCH',
//         body: JSON.stringify(payload)
//     }
//     fetch(`${BASE_URL}${courseToBeUpdated._id}`, httpHeaders)
//     .then((res) => res.json)
//     .then(() =>{
//         loadAllCourses();
//         otherDOMSelectors.editBtn.setAttribute('disabled', true);
//         otherDOMSelectors.addBtn.removeAttribute('disabled');
//         otherDOMSelectors.form.reset();
//     })
//     .catch((err) => {
//         console.error(err);
//     })
// }

// function loadAllCourses(event){
//     if(event){
//         event.preventDefault();
//     }
//     otherDOMSelectors.coursesContainer.innerHTML = '';

//     fetch(BASE_URL)
//     .then((res) => res.json())
//     .then((data) =>{
//         inputsObj = Object.values(data);
//         console.log(inputsObj);
//         for (const course of Object.values(data)) {
//             const divContainer = createElement('div', '', otherDOMSelectors.coursesContainer, '', ['container'], {id: course._id});
//             createElement('h2', course.title, divContainer);
//             createElement('h3', course.teacher, divContainer);
//             createElement('h3', course.type, divContainer);
//             createElement('p', course.description, divContainer);
//             const editBtnInContainer = createElement('button', 'Edit Course', divContainer, '', ['edit-btn']);
//             editBtnInContainer.addEventListener('click', loadDataInInputForm)
//             const finishBtnInContainer = createElement('button', 'Finish Course', divContainer, '', ['finish-btn']);
//             finishBtnInContainer.addEventListener('click', deleteCourse);
//         }

//     })
//     .catch((err) => {
//         console.error(err);
//     })
// }

// function loadDataInInputForm(){
//     const parentElement = this.parentNode;
//     const id = this.parentNode.id;
//     courseToBeUpdated = inputsObj.find((inp) => inp._id === id);
//     for (const key in inputDOMSelectors) {
//         inputDOMSelectors[key].value = courseToBeUpdated[key];
//     }
//     otherDOMSelectors.addBtn.setAttribute('disabled', true);
//     otherDOMSelectors.editBtn.removeAttribute('disabled');
//     parentElement.remove();
// }

// function deleteCourse(){
//     const id = this.parentNode.id;

//     httpHeaders ={
//         method: 'DELETE'
//     }

//     fetch(`${BASE_URL}${id}`, httpHeaders)
//     .then(() =>{
//         loadAllCourses();
//     })
//     .catch((err) => {
//         console.error(err);
//     })
// }


// function inputsValidator(obj){
//     return Object.values(obj).every((inp) => inp.value.trim() !== '');
//   }



function createElements(type, contentOrValue, useInnerHTML, parentNode, id, classes, attributes) {
    const htmlElement = document.createElement(type);
    if (contentOrValue && useInnerHTML) {
        htmlElement.innerHTML = contentOrValue;
    }
    else {
        if (contentOrValue && type === 'input') {
            htmlElement.value = contentOrValue;
        }
        if (contentOrValue && type !== 'input') {
            htmlElement.textContent = contentOrValue;
        }
    }

    if (id) {
        htmlElement.id = id;
    }
    if (classes) {
        htmlElement.classList.add(...classes)
    }
    // {src: 'link', href : 'http'}
    if (attributes) {
        for (const key in attributes) {
            htmlElement.setAttribute(key, attributes[key])
        }
    }
    if (parentNode) {
        parentNode.appendChild(htmlElement);
    }
    return htmlElement;
}