import {
    getMovies, createMovie, updateMovie, deleteMovie,
} from './rest_api';

import { hideUpdateModal, showUpdateModal } from './table_modal';

import {
    controls, imagePlaceholder, addTableRow,
} from './admin_panel_ui';

export async function showAllMovieEntries() {
    const tableBody = document.querySelector('tbody');
    console.log(tableBody);
    tableBody.innerHTML = '';

    const movies = await getMovies();
    movies.forEach((movie, index) => {
        tableBody.appendChild(
            addTableRow(
                movie,
                index,
                () => showUpdateModal(movie),
                () => removeMovieObject(movie.id),
            ),
        );
    });
}

async function addMovieObject(serializedMovieObject) {
    const data = await createMovie(serializedMovieObject);
    console.info("Added");
    console.info(data);

    showAllMovieEntries();
}

async function editMovieObject(id, serializedMovieObject) {
    const data = await updateMovie(id, serializedMovieObject);
    console.info("Updated");
    console.info(data);

    showAllMovieEntries();
}

async function removeMovieObject(id) {
    if (!confirm("Do you really want to remove this item?")) {
        console.info("Canceled");
        return;
    }

    const data = await deleteMovie(id);
    console.info("Removed");
    console.info(data);

    showAllMovieEntries();
}

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

    return new Promise((resolve, reject) => {
        reader.onloadend = () => {
            const fileContent = reader.result;
            resolve(fileContent);
        };

        reader.onerror = () => {
            reject(new Error("oops, something went wrong with the file reader."));
        };

        reader.readAsDataURL(file);
    });
}

async function updateImagePreview() {
    const file = controls.image.files[0];
    const fileContent = await readFile(file);

    controls.imagePreview.src = fileContent;
}

export function tableModal() {
    showAllMovieEntries();

    controls.image.addEventListener("change", () => updateImagePreview());
    controls.button.addEventListener("click", () => showUpdateModal(null));

    controls.form.addEventListener("submit", async (event) => {
        console.info("Form onSubmit");

        event.preventDefault();
        event.stopPropagation();

        if (!controls.form.checkValidity()) {
            return;
        }

        let imageBase64 = "";

        if (controls.imagePreview.src !== imagePlaceholder) {
            const result = await fetch(controls.imagePreview.src);
            const blob = await result.blob();

            imageBase64 = await readFile(blob);
        }

        const currentId = controls.lineId.value;
        if (!currentId) {
            await addMovieObject(
                {
                    title: controls.title.value,
                    type: controls.type.value,
                    requiresSubscription: controls.requiresSubscription.checked,
                    poster: imageBase64,
                    description: controls.description.value,
                    releaseDate: controls.releaseDate.value,
                    country: controls.country.value,
                    tagline: controls.tagline.value,
                    director: controls.director.value,
                    ageRating: controls.ageRating.value,
                    video: controls.video.value,
                },
            );
        } else {
            await editMovieObject(
                currentId,
                {
                    title: controls.title.value,
                    type: controls.type.value,
                    requiresSubscription: controls.requiresSubscription.checked,
                    poster: imageBase64,
                    description: controls.description.value,
                    releaseDate: controls.releaseDate.value,
                    country: controls.country.value,
                    tagline: controls.tagline.value,
                    director: controls.director.value,
                    ageRating: controls.ageRating.value,
                    video: controls.video.value,
                },
            );
        }

        hideUpdateModal();
    });
}