import {
    myFetch
} from "./myFetch.js";

const html = {
    $catches: () => document.getElementById("catches"),
    $form: () => document.getElementById("addForm"),
    $loadBtn: () => document.querySelector("button.load"),
    $addBtn: () => document.querySelector("button.add"),
    $weight: (x) => x.querySelector("input.weight"),
    $angler: (x) => x.querySelector("input.angler"),
    $species: (x) => x.querySelector("input.species"),
    $location: (x) => x.querySelector("input.location"),
    $captureTime: (x) => x.querySelector("input.captureTime"),
    $bait: (x) => x.querySelector("input.bait"),
    $updateBtn: (x) => x.querySelector("button.update"),
    $deleteBtn: (x) => x.querySelector("button.delete")
};

const copyOfExample = document.querySelector("#catches>div:nth-child(1)").cloneNode(true);

function addCatch() {
    const state = html.$form();
    const body = {
        "angler": html.$angler(state).value,
        "bait": html.$bait(state).value,
        "captureTime": html.$captureTime(state).value,
        "location": html.$location(state).value,
        "species": html.$species(state).value,
        "weight": html.$weight(state).value
    }

    myFetch("POST", body);
    showCatches()
}

async function showCatches() {
    let data = await myFetch();

    clearHtml()
    Object.entries(data).forEach((el) => {
        createCatch(el);
    });
}

function createCatch(data) {
    let copy = copyOfExample.caaloneNode(true);

    let [id, stats] = data;
    copy.setAttribute("data-id", id);

    Object.entries(stats).forEach(([stat, val]) => {
        html[`$${stat}`](copy).value = val;
    });

    const updateBinded = updateCatch.bind(copy, id);
    const deleteBinded = deleteCatch.bind(copy, id);

    html.$updateBtn(copy).addEventListener("click", updateBinded);
    html.$deleteBtn(copy).addEventListener("click", deleteBinded);

    html.$catches().appendChild(copy);
}

function updateCatch(id) {

}

function deleteCatch(id) {
    myFetch('DELETE', undefined, id);
    showCatches();
}

function clearHtml() {
    html.$catches().innerHTML = '';
}

function attachEvents() {
    html.$loadBtn().addEventListener("click", showCatches);
    html.$addBtn().addEventListener("click", addCatch);
}

attachEvents();

-------------------------------------------------------
function generateURL(id = "") {
    return `https://bus-stops-54acb.firebaseio.com/Fisher/${id}/.json`;
}

const methodsHeaders = {
    POST: (body) => {
        return {
            method: "POST",
            headers: {
                "content-type": "application/json"
            },
            body: JSON.stringify(body)
        };
    },
    UPDATE: (body) => {
        return {
            method: "PUT",
            headers: {
                "content-type": "application. json"
            },
            body: JSON.stringify(body)
        };
    },
    DELETE: () => {
        return {
            method: "DELETE"
        };
    }
};

export function myFetch(method,body,id) {
    if (method) {
        const header = methodsHeaders[method](body);

        return id ?
            fetch(generateURL(id), header) :
            fetch(generateURL(), header);
    }

    return fetch(generateURL()).then((d) => d.json());
}