$(document).ready(function () {
    /**
     * check local storage appendArray key if null or not
     * to get it's contain to append it to photo row block
     * this key store old image block in local storage
     * to show it again when validation error
     */

    let rowElements = JSON.parse(localStorage.getItem('articleGallery'));
    if (rowElements !== null){
        localStorage.setItem('oldArticleStorage', JSON.stringify(rowElements));
        let photoRow = $(".photos .row");
        photoRow.html('');
        for (let i = 0; i < rowElements.length; i++){
            photoRow.append(`<div class='col-md-4'>`+rowElements[i]+`</div>`);
        }
    }

    /**
     * to reset inputs in image lock when
     * delete it by close button
     */
    // $(document).on('click', 'a.close', function () {
    //     $(this).parent('.items').parent('div').remove();
    //     let appendArray = [];
    //     $(".photos .row").children('.row > div').each(function () {
    //         appendArray.push($(this).html());
    //     });
    //     localStorage.setItem('articleGallery', JSON.stringify(appendArray));
    // });

    if ($('.external').prop('checked') === true){ // type 1
        $('.url_container').removeClass('d-none');
        $('.video_container').addClass('d-none');
        $('.image_container').addClass('d-none');
        // $('.other_image_container').addClass('d-none');
        $('.youtube_thumbnails').removeClass('d-none');
        $('.video_thumbnail').val('');
        $('.image_thumbnail').val('');
        // $('.other_image_thumbnail').val('');
    }

    if ($('.local').prop('checked') === true){ // type 2
        $('.url_container').addClass('d-none');
        $('.video_container').removeClass('d-none');
        $('.image_container').removeClass('d-none');
        // $('.other_image_container').removeClass('d-none');
        $('.youtube_thumbnails').remove();
        $('.url').val('');
    }

    $('.external').click(function () { // type 1
        $('.url_container').removeClass('d-none');
        $('.video_container').addClass('d-none');
        $('.image_container').addClass('d-none');
        // $('.other_image_container').addClass('d-none');
        $('.youtube_thumbnails').removeClass('d-none').children('.photos').removeClass('hide');
        $('.video_thumbnail').val('');
        $('.image_thumbnail').val('');
        $('.other_image_thumbnail').val('');
    });

    $('.local').click(function () { // type 2
        $('.url_container').addClass('d-none');
        $('.video_container').removeClass('d-none');
        $('.image_container').removeClass('d-none');
        // $('.other_image_container').removeClass('d-none');
        $('.youtube_thumbnails').remove();

        $('.video_thumbnail').next().css({
            display: 'none'
        }).siblings('span').css({
            display: 'inline-block'
        });

        $('.image_thumbnail').next().css({
            display: 'none'
        }).siblings('span').css({
            display: 'inline-block'
        });

        $('.other_image_thumbnail').next().css({
            display: 'none'
        }).siblings('span').css({
            display: 'inline-block'
        });

        $('.url').val('');
    })
})
