const routes = {
    'home': document.getElementById('home-section'),
    'create': document.getElementById('create-section'),
    'details': document.getElementById('details-section'),
    'profile': document.getElementById('profile-section'),
};


const router = (pathname) => {


    let [path, id] = pathname.split('/').filter(x => x);
    console.log(path,id);


    Object.values(routes).forEach(section => section.style.display = "none");

    routes[path].style.display = 'block';

    switch (path) {
        case 'home':
            renderHomePage();
            break;
        case 'details':
            renderDetailsPage(id);
            break;
    }

};

function renderDetailsPage(id) {


    fetch(`https://test-project-9adc2.firebaseio.com/furnitures/${id}.json`)

        .then(response => response.json())
        .then(data => {
            let detailsViewElement = document.getElementById('details-view');
            detailsViewElement.innerHTML = `
            <p>Make:  ${data.make}</p>
            <p>Model: ${data.model}</p>
            <p>Year: ${data.year}</p>
            <p>Description: ${data.description}</p>
            <p>Price: ${data.price}</p>
            <p>Material: ${data.material}</p>
        `
        })
}

function renderHomePage() {

    let furnitureListElement = document.getElementById('furniture-list');
    //get all furnitures
    fetch('https://test-project-9adc2.firebaseio.com/furnitures.json')
        .then(res => res.json())
        .then(data => {
            //use template to render
            let dataHtml = Object.keys(data).map(x => furnitureItemTemplate(x, data[x])).join('')
            //append to dom
            furnitureListElement.innerHTML = dataHtml;
        });



}

function redirect(path) {
    history.pushState({}, '', path);
    router(path);
}


function onRouteChange(e) {
    if (e.target.tagName != 'A') {
        return;
    }
    e.preventDefault();

    let url = new URL(e.target.href);


    redirect(url.pathname);


}

function onCreateSubmit(e) {

    e.preventDefault();
    let make = formElement.querySelector('#new-make').value;
    let price = formElement.querySelector('#new-price').value;
    let model = formElement.querySelector('#new-model').value;
    let image = formElement.querySelector('#new-image').value;
    let year = formElement.querySelector('#new-year').value;
    let material = formElement.querySelector('#new-material').value;
    let description = formElement.querySelector('#new-description').value;

    let newFurniture = {
        make,
        price,
        model,
        image,
        year,
        material,
        description,
    }

    fetch('https://test-project-9adc2.firebaseio.com/furnitures.json', {
        method: "POST",
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(newFurniture)
    })
        .then(response => response.json())
        .then(data => redirect('home'));



}
document.querySelector('nav').addEventListener('click', onRouteChange);

let formElement = document.querySelector('#create-form');
formElement.addEventListener('submit', onCreateSubmit)
router(location.pathname);