$(function () {
    //Zmienne początkowe
    var $repertuarList = $('.repertuar');
    var apiUrl = 'http://localhost:3000/movies';

    //Obsługa edycji
    $('body').on('click', '.edit', function () {
        //Wiersz który kliknąłem
        var $liElement = $(this).parent();
        //Id klikniętego wiersza
        var clickedId = $liElement.data('id');

        //Pobieramy treść tytułu i opisu z H3 i P wewnątrzy klikniętego wiersza
        var oldTitle = $liElement.find('h3').text();
        var oldDescription = $liElement.find('p').text();

        //Dodaje klasę editable która chowa elementy wyświetlające tytuł i opis
        $liElement.addClass('editable');

        //Tworze inputy do ktorych wpisuje wartości pobrane z tytułu i opisu dla filmu
        var $titleInput = $('<input>');
        $titleInput.val(oldTitle);

        //Tworze inputy do ktorych wpisuje wartości pobrane z tytułu i opisu dla filmu
        var $descriptionInput = $('<input>');
        $descriptionInput.val(oldDescription);

        //Tworze przycisk który będzie zapisywał dane!
        var $submitButton = $('<button>');
        $submitButton.text('Zapisz');

        //Appenduję wszystkie dzieci
        $liElement.append($titleInput);
        $liElement.append($descriptionInput);
        $liElement.append($submitButton);

        //Dodaje obsługę kliknięcia w przycisk zapisz
        $submitButton.on('click', function () {
            //Pobieram wartości z elementów INPUT które chwilę temu dodałem do całego LI
            var title = $titleInput.val();
            var description = $descriptionInput.val();

            //Tworzę obiekt który będzie edytował dane na serwerze
            var editMovie = {
                description: description,
                title: title
            };

            //Edycja danych na serwerze
            $.ajax({
                type: "PUT",
                url: apiUrl + '/' + clickedId, //podaje ścieżkę do /movies/{id} - id klikniętego wiersza
                data: editMovie,
                dataType: 'json'
            })
                .done(function (response) {
                    //Kiedy dane na serwerze się zapdejtują to usuwam klasę która robi obramowanie
                    $liElement.removeClass('editable');

                    //Usuwam wszystkie dodatkowe przyciski
                    $titleInput.remove();
                    $descriptionInput.remove();
                    $submitButton.remove();

                    //Wpisuję nowe wartości do tytułu i opisu
                    $liElement.find('h3').text(response.title);
                    $liElement.find('p').text(response.description);
                })
                .fail(function (error) {
                    console.log('Error!', error);
                });
        });
    });

    //Obsługa kliknięcia DELETE(przyciski delete sa generowane dynamicznie)
    $('body').on('click', '.delete', function () {
        //Pobieramy element LI - który jest rodzicem przycisku do usuwania
        var $parent = $(this).parent();
        var clickedLiId = $parent.data('id'); //pobieramy ID kliknietego LI

        //Usuwanie danych z bazy - za pomoca metody DELETE
        $.ajax({
            type: "DELETE",
            url: apiUrl + '/' + clickedLiId, //Adres do usuwanie zasobow wygląda tak: http://localhost:3000/movies/{id} - to id na koncu doklejamy do string'a
            dataType: 'json'
        })
            .done(function (response) {
                //kiedy usunelismy rzeczy z bazy danych - usuwamy cały element LI z html'a
                $parent.remove();
            })
            .fail(function (error) {
                console.log('Error!', error);
            });
    });

    //Dodawanie nowych filmów
    $('.add_movie').on('submit', function (event) {
        //Domyślnie event submit robi przeladowanie strony - stąd robimy event.preventDefault();
        event.preventDefault();

        //Pobieramy wartości z inputów
        var title = $('.get_title').val();
        var description = $('.get_description').val();

        //Tworzymy nowy obiekt filmu który będziemy wysyłać na serwer
        var newMovie = {
            title: title,
            description: description
        };

        $.ajax({
            type: "POST", //POST - bo tworzymy nowe zasób
            url: apiUrl,
            data: newMovie, //W data wysyłamy te dane które mają być nowym filmem
            dataType: 'json'
        })
            .done(function (response) {
                renderMovie(response); //Użycie tej samej funkcji który na podstawie obiektu filmy wygeneruje nowy wiersz z nowym filmem
            })
            .fail(function (error) {
                console.log('Error!', error);
            });
    });

    //Funkcja na podstawie obiektu filmu(argument movie) renderuje(tworzy kod HTML) który przedstawia zadany film
    function renderMovie(movie) {
        var $newListElement = $('<li>');

        var $title = $('<h3>');
        $title.text(movie.title);

        var $desc = $('<p>');
        $desc.text(movie.description);

        var $editBtn = $("<button>", {class: "edit"});
        $editBtn.text('Edytuj');

        var $removeBtn = $("<button>", {class: "delete"});
        $removeBtn.text('Usuń');

        //W każdym elemencie <LI> zapisujemy w DATA_SECIE id konkretnego filmu
        $newListElement.data('id', movie.id);

        //Appendujemy wszystko ok LI
        $newListElement.append($title);
        $newListElement.append($desc);
        $newListElement.append($removeBtn);
        $newListElement.append($editBtn);

        //Appenduje LI do naszej listy UL
        $repertuarList.append($newListElement);
    }

    //Funkcja początkowa ładująca wszystkie filmy
    function loadMovies() {
        //dane sa ładowane ajaxem
        $.ajax({
            type: "GET",
            url: apiUrl,
            dataType: 'json'
        })
            .done(function (response) {
                for (var i = 0; i < response.length; i++) {
                    //pod zmienną resposne[i] mam pojedynczy obiekt który jest filmem
                    renderMovie(response[i]);
                }
            })
            .fail(function (error) {
                console.log('Error!', error);
            });
    }

    loadMovies();
});