// модуль с логикой
import {
 getAllLines, getLine, createLine, updateLine, deleteLine,
} from "./posts-rest-api";
import {
    cntrls, imagePlaceholder, createTableRow,
} from "./posts-ui";

export async function drawLinesTable() {
    console.info("Try to load data");
    if (!cntrls.table) {
        return;
    }
    // вызов метода REST API для получения всех записей
    const data = await getAllLines();
    // очистка содержимого table
    // удаляется все, что находится между тегами <table></table>
    // но не атрибуты
    cntrls.table.innerHTML = "";
    data.forEach((item, index) => {
        cntrls.table.appendChild(
            createTableRow(
                item,
                index,
                () => location.assign(`add_news.html?id=${item.id}`),
                () => removeLine(item.id),
            ),
        );
    });
}

async function addLine(title, date, text, tage, image) {
    console.info("Try to add item");
    // вызов метода REST API для добавления записи
    const data = await createLine(title, date, text, tage, image);
    console.info("Added");
    console.log(data);
    drawLinesTable();
}

async function editLine(id, title, date, text, tage, image) {
    console.info("Try to update item");
    // вызов метода REST API для обновления записи
    const data = await updateLine(id, title, date, text, tage, image);
    console.info("Updated");
    console.log(data);
    drawLinesTable();
}

async function removeLine(id) {
    if (!confirm("Do you really want to remove this item?")) {
        console.info("Canceled");
        return;
    }
    console.info("Try to remove item");
    // вызов метода REST API для удаления записи
    const data = await deleteLine(id);
    console.log(data);
    // загрузка и заполнение table
    drawLinesTable();
}

async function readFile(file) {
    const reader = new FileReader();

    return new Promise((resolve, reject) => {
        // 2. "Возвращаем" содержимое когда файл прочитан
        // через вызов resolve
        // Если не использовать Promise, то всю работу по взаимодействию
        // с REST API пришлось бы делать в обработчике (callback) функции
        // onloadend
        reader.onloadend = () => {
            const fileContent = reader.result;
            // Здесь могла бы быть работа с REST API
            // Чтение заканчивает выполняться здесь
            resolve(fileContent);
        };
        // 3. Возвращаем ошибку
        reader.onerror = () => {
            // Или здесь в случае ошибки
            reject(new Error("oops, something went wrong with the file reader."));
        };
        // Шаг 1. Сначала читаем файл
        // Чтение начинает выполняться здесь
        reader.readAsDataURL(file);
    });
}

// функция для обновления блока с превью выбранного изображения
async function updateImagePreview() {
    // получение выбранного файла
    // возможен выбор нескольких файлов, поэтому необходимо получить только первый
    const file = cntrls.image.files[0];
    // чтение содержимого файла в виде base64 строки
    const fileContent = await readFile(file);
    console.info("base64 ", fileContent);
    // обновление атрибута src для тега img с id image-preview
    cntrls.imagePreview.src = fileContent;
}

// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
export async function linesPageForm() {
    console.info("linesPageForm");
    // func1 = (id) => {} аналогично function func1(id) {}
    const goBack = () => location.assign("/admin.html");

    // Вызов функции обновления превью изображения при возникновении
    // события onchange в тэге input с id image
    cntrls.image.addEventListener("change", () => updateImagePreview());

    // получение параметров GET-запроса из URL
    // параметры перечислены после символа ? (?id=1&color=black&...)
    const urlParams = new URLSearchParams(location.search);

    // получение значения конкретного параметра (id)
    // указан только при редактировании
    const currentId = urlParams.get("id");
    // если id задан
    if (currentId) {
        try {
            // вызов метода REST API для получения записи по первичному ключу(id)
            const line = await getLine(currentId);
            // заполнение формы для редактирования
            cntrls.title.value = line.title;
            cntrls.date.value = line.date;
            cntrls.text.value = line.text;
            cntrls.tage.value = line.tage;
            // заполнение превью
            // Если пользователь выбрал изображение, то оно загружается
            // в тэг image с id image - preview
            // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
            cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
        } catch {
            goBack();
        }
    }

    // обработчик события отправки формы
    cntrls.form.addEventListener("submit", async (event) => {
        console.info("Form onSubmit");
        // отключение стандартного поведения формы при отправке
        // при отправке страница обновляется и JS перестает работать
        event.preventDefault();
        event.stopPropagation();
        // если форма не прошла валидацию, то ничего делать не нужно
        if (!cntrls.form.checkValidity()) {
            return;
        }

        let imageBase64 = "";
        // Получение выбранного пользователем изображения в виде base64 строки
        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
        // дефолтное изображение
        if (cntrls.imagePreview.src !== imagePlaceholder) {
            // Загрузка содержимого атрибута src тэга img с id image-preview
            // Здесь выполняется HTTP запрос с типом GET
            const result = await fetch(cntrls.imagePreview.src);
            // Получение из HTTP-ответа бинарного содержимого
            const blob = await result.blob();
            // Получение base64 строки для файла
            // Здесь выполняется Promise из функции readFile
            // Promise позволяет писать линейный код для работы с асинхронными методами
            // без использования обработчиков (callback) с помощью await
            imageBase64 = await readFile(blob);
        }

        // если значение параметра запроса не задано,
        // то необходимо выполнить добавление записи
        // иначе обновление записи
        if (!currentId) {
            await addLine(
                cntrls.title.value,
                cntrls.date.value,
                cntrls.text.value,
                cntrls.tage.value,
                imageBase64,
            );
        } else {
            await editLine(
                currentId,
                cntrls.title.value,
                cntrls.date.value,
                cntrls.text.value,
                cntrls.tage.value,
                imageBase64,
            );
        }
        goBack();
    });
}

export async function UpdateNews() {
    const data = await getAllLines();
    data.reverse();
    const div0 = document.createElement("div");
    div0.setAttribute("class", "row row-cols-1 row-cols-md-3 g-4");
    cntrls.list.appendChild(div0);

    data.forEach((item) => {
        UpdateNew(div0, item);
    });
}

/* <div class="col">
    <div class="card h-100">
        <img src="${elem.image}" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">${elem.title}</h5>
            <p class="card-text"><small class="text-body-secondary">${elem.date}</small></p>
            <p class="card-text">${elem.text}</p>
            <тег>
        </div>
    </div>
</div> */

async function UpdateNew(div0, item) {
    console.info(item.id + " was created");

    // колонка
    const div1 = document.createElement("div");
    div1.setAttribute("class", "col");

    // пост
    const div2 = document.createElement("div");
    div2.setAttribute("class", "card h-100");

    // картинка
    const image = document.createElement("img");
    image.setAttribute("src", item.image);
    image.setAttribute("width", "100%");
    image.setAttribute("height", "330px");
    image.setAttribute("alt", item.title);

    // card-body
    const div3 = document.createElement("div");
    div3.setAttribute("class", "card-body");

    // Заголовок
    const h5 = document.createElement("h5");
    h5.setAttribute("class", "card-title");
    h5.textContent = item.title;

    // для даты
    const p1 = document.createElement("p");
    p1.setAttribute("class", "card-text");

    const small1 = document.createElement("small");
    p1.setAttribute("class", "text-body-secondary");
    p1.textContent = item.date;

    // для текста
    const p2 = document.createElement("p");
    p2.setAttribute("class", "card-text");
    p2.textContent = item.text;

    // для тега
    const small2 = document.createElement("small");
    small2.setAttribute("class", "text-body-secondary");

    // ссылка для тега
    let aTages = item.tage.split(" ");
    for (let i = 0; i < aTages.length; i++) {
        const element = aTages[i];
        const a1 = document.createElement("a");
        a1.setAttribute("href", "#");
        a1.textContent = "#" + element + " ";
        small2.appendChild(a1);
    }
    
    div0.appendChild(div1);
    div1.appendChild(div2);
    div2.appendChild(image);
    div2.appendChild(div3);
    div3.appendChild(h5);
    div3.appendChild(p1);
    p1.appendChild(small1);
    div3.appendChild(p2);
    div3.appendChild(small2);
}