// модуль с логикой

import { hideUpdateModal, showUpdateModal } from "./lines-modal";
import {
  createLine,
  deleteLine,
  getAllDiscountsTypes,
  getAllItemTypes,
  getAllLines,
  getLine,
  updateLine,
} from "./lines-rest-api";
import {
  cntrls,
  createItemsOption,
  createTableRow,
  imagePlaceholder,
  // createTableAnchor,
} from "./lines-ui";

async function drawItemsSelect() {
  console.log(111);
  // вызов метода REST API для получения списка типов товаров
  const data = await getAllItemTypes();
  const data2 = await getAllDiscountsTypes();
  // очистка содержимого select
  // удаляется все, что находится между тегами <select></select>
  // но не атрибуты
  cntrls.itemsType.innerHTML = "";
  cntrls.discountsType.innerHTML = "";
  // пустое значение
  cntrls.itemsType.appendChild(
    createItemsOption("Выберите значение", "", true)
  );
  // цикл по результату ответа от сервера
  // используется лямбда-выражение
  // (item) => {} аналогично function(item) {}
  data.forEach((item) => {
    cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
  });
  data2.forEach((item) => {
    cntrls.discountsType.appendChild(createItemsOption(item.name, item.id));
  });
}

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 = "";
  // цикл по результату ответа от сервера
  // используется лямбда-выражение
  // (item, index) => {} аналогично function(item, index) {}
  data.forEach((item, index) => {
    cntrls.table.appendChild(
      createTableRow(
        item,
        index,
        // функции передаются в качестве параметра
        // это очень удобно, так как аргументы функций доступны только
        // в данном месте кода и не передаются в сервисные модули
        () => showUpdateModal(item),
        () => removeLine(item.id)
      )
    );
  });
}

async function addLine(item, title, price, description, discounts, image) {
  console.info("Try to add item");
  // вызов метода REST API для добавления записи
  const data = await createLine(
    item,
    title,
    price,
    description,
    discounts,
    image
  );
  console.info("Added");
  console.info(data);
  // загрузка и заполнение table
  drawLinesTable();
}

async function editLine(id, item, title, price, description, discounts, image) {
  console.info("Try to update item");
  // вызов метода REST API для обновления записи
  const data = await updateLine(
    id,
    item,
    title,
    price,
    description,
    discounts,
    image
  );
  console.info("Updated");
  console.info(data);
  // загрузка и заполнение table
  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.info(data);
  // загрузка и заполнение table
  drawLinesTable();
}

// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
async function readFile(file) {
  const reader = new FileReader();

  // создание Promise-объекта для использования функции
  // с помощью await (асинхронно) без коллбэков (callback)
  // https://learn.javascript.ru/promise
  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;
}

// Функция для обработки создания и редактирования элементов таблицы через модальное окно
// Если хотите делать через страницу, то удалите эту функцию
export function linesForm(isCheckEvent = true) {
  console.info("linesForm");

  // загрузка и заполнение select со списком товаров
  drawItemsSelect();
  // // загрузка и заполнение table
  drawLinesTable();

  if (isCheckEvent === true) {
    cntrls.image.addEventListener("change", () => updateImagePreview());
    cntrls.button.addEventListener("click", () => showUpdateModal(null));
  }

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

    // получение id строки для редактирования
    // это значение содержится в скрытом input
    const currentId = cntrls.lineId.value;
    // если значение id не задано,
    // то необходимо выполнить добавление записи
    // иначе обновление записи
    console.log("MYsubmit", cntrls);
    if (!currentId) {
      await addLine(
        cntrls.itemsType.value,
        cntrls.title.value,
        cntrls.price.value,
        cntrls.description.value,
        cntrls.discountsType.value,
        imageBase64
      );
    } else {
      await editLine(
        currentId,
        cntrls.itemsType.value,
        cntrls.title.value,
        cntrls.price.value,
        cntrls.description.value,
        cntrls.discountsType.value,
        imageBase64
      );
    }

    // после выполнения добавления/обновления модальное окно скрывается
    hideUpdateModal();
  });
}

export async function createCards() {
  console.info("createCards");
  try {
    const container = document.getElementById("cards-container");

    const data = await getAllLines();
    console.log("data", data);

    data.forEach((line, index) => {
      console.log("K", line, index);
      const cardDiv = document.createElement("div");
      cardDiv.className = "col";

      const card = document.createElement("div");
      card.className = "card";

      const img = document.createElement("img");
      img.src = line.image !== "" ? line.image : "images/centerpicture.jpg";
      img.className = "rounded-img";
      img.alt = "";
      img.style.maxHeight = "500px";

      const cardBody = document.createElement("div");
      cardBody.className = "card-body";

      const title = document.createElement("h5");
      title.className = "card-title";
      title.textContent = line.title;

      const price = document.createElement("h5");
      price.className = "card-title";
      price.textContent = "Старая цена: " + line.price;

      const discounts = document.createElement("h6");
      discounts.classList.add("card-text");
      discounts.innerText = "Скидка: " + line.discounts.name + "%";

      const newPrice = document.createElement("h5");
      newPrice.className = "card-title";
      newPrice.textContent = "Новая цена: " + line.newPrice;
      newPrice.style.color = "red";

      const description = document.createElement("p");
      description.className = "card-text";
      description.innerHTML = line.description;

      cardBody.appendChild(title);
      cardBody.appendChild(price);
      cardBody.appendChild(discounts);
      cardBody.appendChild(newPrice);
      cardBody.appendChild(description);

      card.appendChild(img);
      card.appendChild(cardBody);

      cardDiv.appendChild(card);

      container.appendChild(cardDiv);
    });
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}