import { Modal } from "bootstrap";
import { cntrls, imagePlaceholder } from "./lines-ui";

const modal = document.getElementById("items-update");

const myModal = modal ? new Modal(modal, {}) : null;

const modalTitle = document.getElementById("items-update-title");

function resetValues() {
    cntrls.lineId.value = "";
    cntrls.itemsType.value = "";
    cntrls.author.value = "";
    cntrls.title.value = "";
    cntrls.itemsLongs.value = "";
    cntrls.image.value = "";
    cntrls.imagePreview.src = imagePlaceholder;
    cntrls.text.value = "";
}

export function showUpdateModal(item) {
    modalTitle.innerHTML = item === null ? "Add" : "Change";
    // console.info(item);

    if (item) {
        cntrls.lineId.value = item.id;
        cntrls.itemsType.value = item.itemsId;
        cntrls.author.value = item.author;
        cntrls.title.value = item.title;
        cntrls.itemsLongs.value = item.longsId;

        cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
    } else {
        resetValues();
    }

    myModal.show();
}

export function hideUpdateModal() {
    resetValues();

    cntrls.form.classList.remove("was-validated");

    myModal.hide();
}