$(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', '.other_image_container 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));
    });

    /**
     * Function to hide all divs of video
     */
    function hideAllVideo() {
        $('.url_container').addClass('d-none');
        $('.url').val('');

        $('.video_container').addClass('d-none');
        $('.image_container').addClass('d-none');
        // $('.other_image_container').addClass('d-none');
        $('.youtube_thumbnails').remove();
        $('.video_thumbnail').val('');
        $('.image_thumbnail').val('');
    }

    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
        // alert(this.checked)
        if(!$('.url_container').hasClass('d-none') && $('.image_container').hasClass('d-none')){
            $(this).prop('checked', false);
            hideAllVideo()
            return
        }
        $('.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
        if($('.url_container').hasClass('d-none') && !$('.image_container').hasClass('d-none')){
            $(this).prop('checked', false);
            hideAllVideo()
            return
        }
        $('.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('');
    })
})
