{% extends 'index.html' %}
{% load static %}

<title>
    {% block title %}
        Post List
    {% endblock title %}
</title>


{% block content %}
    <div class="row">
        <div class="container">
            <form id="post-form-id" class="post-form" action="{% url 'posts:post-list' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token%}
                {{ form }}
                <div class="form-btns">
                    <button type="submit">Submit</button>
                </div>
            </form>
            <div id="post-container">
                <!-- posts go here -->
            </div>
        </div>
    </div>

    <script>
        const postContainer = document.querySelector('#post-container')
        postContainer.innerHTML = `<h4>Loading...</h4>`
        const postForm = document.querySelector('#post-form-id')

        const handlePostFormSubmit = (e)=> {
            e.preventDefault()
            // const {content} = Object.fromEntries(new FormData(e.target))
            const form = e.target
            const formData = new FormData(form)
            const url = form.getAttribute('action')
            const method = form.getAttribute('method')
            const xhr = new XMLHttpRequest()

            xhr.open(method, url)
            xhr.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest')
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
            xhr.onload = ()=> {
                console.log(JSON.parse(xhr.response))
            }
            xhr.send(formData)
            e.target.reset()
        }

        postForm.addEventListener('submit', handlePostFormSubmit)


        const createInnerHtmlElement = (post)=> {
            const element = `
                <div class="post-content">
                    <a class="content" href=${post.url}>${post.content}</a>
                    <p>${post.user} ${post.total_posts} ${parseInt(post.total_posts) > 1 ? 'Posts' : "post"}</p>
                    <button
                        class="post-like-btn"
                        data_id=${post.id}
                        onclick=handleLike("${post.id}","${post.likes}")
                        type="button"
                    >
                        ${post.likes} ${parseInt(post.likes) > 1 ? "Likes" : "Like"}
                    </button>
                </div>
            `
            return element
        }

        const loadPosts = ()=> {
            const xhr = new XMLHttpRequest()
            const method = 'GET'
            const url = '/posts?str=js-request'
            const responseType= 'json'

            xhr.responseType = responseType
            xhr.open(method, url)
            xhr.onload = ()=> {
                const response = xhr.response
                const elementArray = response.json_data.map((post)=> {
                    return createInnerHtmlElement(post)
                }).join('')
                postContainer.innerHTML = elementArray
            }
            xhr.send()
        }
        loadPosts()
    </script>
{% endblock content %}