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('/');
}
}

})
}
}