import { html, render } from 'https://unpkg.com/lit-html?module';
import page from "//unpkg.com/page/page.mjs"

function detailsTemplate(item) {
    return html`
    <div class="container">
    <div class="row space-top">
        <div class="col-md-12">
            <h1>Furniture Details</h1>
        </div>
    </div>
    <div class="row space-top">
        <div class="col-md-4">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <img src=${item.img} />
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <p>Make: <span>${item.make}</span></p>
            <p>Model: <span>${item.model}</span></p>
            <p>Year: <span>${item.year}</span></p>
            <p>Description: <span>${item.description}</span></p>
            <p>Price: <span>${item.price}</span></p>
            <p>Material: <span>${item.material}</span></p>
            ${item._ownerId==sessionStorage.getItem("userId")?html` <div>
            <a href="/edit/${item._id}"  class="btn btn-info">Edit</a>
            <a href=”#” class="btn btn-red">Delete</a>
        </div>`:""}

        </div>
    </div>
</div>
    `

}

async function getCurrentItem(id) {
    let response = await fetch("http://localhost:3030/data/catalog/" + id);
    let currentItem = await response.json();
    return currentItem;
}


export async function showDetails(context) {
    let item = await (getCurrentItem(context.params.id))
    let container = document.getElementsByClassName("container")[0];

   render(detailsTemplate(item),container);

    let delBtn=document.getElementsByClassName("btn btn-red")[0];
    if (delBtn){
    delBtn.addEventListener("click", async function (e){
        e.preventDefault();
        let confirmation= confirm("Are you sure you want to delete this item?");
        if (confirmation){

            let myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("X-Authorization", sessionStorage.getItem("authToken"))

            let options = {
                method: 'DELETE',
                headers: myHeaders,
                redirect: 'follow'
            };
        let response= await fetch("http://localhost:3030/data/catalog/"+item._id, options);
        let result=await response.json();
        if (result){
            page.redirect('/');
        }
        }

    })
}
}