function attachEvents() {
    let main_url = 'http://localhost:3030/jsonstore/tasks/'
    const load_btn = document.getElementById('load-board-btn')
    const add_btn = document.getElementById('create-task-btn')
    const ul_elements = Array.from(document.getElementsByTagName('ul'))
    let to_do_ul = ul_elements[0]
    let progress_ul = ul_elements[1]
    let code_progress_ul = ul_elements[2]
    let done_ul = ul_elements[3]

    const title_input = document.getElementById('title')
    const description_input = document.getElementById('description')

    load_btn.addEventListener("click", load_tasks)
    add_btn.addEventListener("click", add_task)

    function load_tasks(load_event) {
        if (load_event) {
            load_event.preventDefault()
        }
        to_do_ul.innerHTML = ''
        progress_ul.innerHTML = ''
        code_progress_ul.innerHTML = ''
        done_ul.innerHTML = ''

        fetch(main_url)
            .then((res) => res.json())
            .then((data) => {
                let tasks = Object.values(data)
                for (const task of tasks) {
                    let li_element = document.createElement('li')
                    li_element.id = task._id
                    li_element.classList.add('task')
                    let h3_content = task.title
                    let p_content = task.description
                    let h3_element = create_element('h3', h3_content, li_element)
                    let p_element = create_element('p', p_content, li_element)
                    if (task.status === 'ToDo') {
                        let button_element = create_element('button', 'Move to In Progress', li_element, move_to)
                        button_element.classList.add('To_Do')
                        to_do_ul.appendChild(li_element)
                    }
                    else if (task.status === 'In Progress') {
                        let button_element = create_element('button', 'Move to Code Review', li_element, move_to)
                        button_element.classList.add('In_Progress')
                        progress_ul.appendChild(li_element)
                    }
                    else if (task.status === 'Code Review') {
                        let button_element = create_element('button', 'Move to Done', li_element, move_to)
                        button_element.classList.add('Code_Review')
                        code_progress_ul.appendChild(li_element)
                    }
                    else if (task.status === 'Done') {
                        let button_element = create_element('button', 'Close', li_element, close_task)
                        done_ul.appendChild(li_element)
                    }
                }

            })
    }

    function add_task(add_event) {
        add_event.preventDefault()
        let title = title_input.value
        let description = description_input.value
        let status = 'ToDo'
        let add_task_headers = {
            method: 'POST',
            body: JSON.stringify({title, description, status})
        }

        fetch(main_url, add_task_headers)
            .then(() => {
                load_tasks()
            })
        title_input.value = ''
        description_input.value = ''
    }

    function move_to(move_event) {
        let move_element = move_event.currentTarget.parentElement
        let move_id = move_element.id
        let move_url = `${main_url}${move_id}`
        let task_info = Array.from(move_element.children)
        let title = task_info[0].textContent
        let description = task_info[1].textContent
        let status = ''
        let button_status = this.classList[0].split('_').join(' ')
        if (button_status === 'To Do') {
            status = 'In Progress'
        } else if (button_status === 'In Progress') {
            status = 'Code Review'
        } else if (button_status === 'Code Review') {
            status = 'Done'
        }

        let move_headers = {
            method: "PATCH",
            body: JSON.stringify({title: title, description: description, status: status})
        }

        fetch(move_url, move_headers)
            .then(() => {
                load_tasks()
            })
    }

    function close_task(close_event) {
        let close_element = close_event.currentTarget.parentElement
        let current_id = close_element.id
        let close_url = `${main_url}${current_id}`
        let close_headers = {
            method: 'DELETE',
        }

        fetch(close_url, close_headers)
            .then(() => {
                load_tasks()
            })
    }

    function create_element(element_type, element_content, patent_element, some_event) {
        let current_element = document.createElement(element_type)
        current_element.textContent = element_content
        patent_element.appendChild(current_element)
        if (some_event) {
            current_element.addEventListener('click', some_event)
        }
        return current_element
    }
}

attachEvents();