const $ = require('jquery');
require('jquery-ui-bundle');
const materialize = require('materialize-css/dist/js/materialize');
window.Materialize = materialize;

const codemirror = require('codemirror/lib/codemirror');
window.CodeMirror = codemirror;

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

import javascript from "codemirror/mode/javascript/javascript"
import htmlmixed from "codemirror/mode/htmlmixed/htmlmixed"
import htmlEmbeddedMode from "codemirror/mode/htmlembedded/htmlembedded"
import css from "codemirror/mode/css/css"
import twig from "codemirror/mode/twig/twig"
import tinymce from "tinymce/tinymce"

import show_hint from "codemirror/addon/hint/show-hint"
import html_hint from "codemirror/addon/hint/html-hint"
import css_hint from "codemirror/addon/hint/css-hint"
import javascript_hint from "codemirror/addon/hint/javascript-hint"


// any CSS you require will output into a single css file (app.css in this case)
require('../scss/material-icons-custom.scss');
require('materialize-css/sass/materialize.scss');
require('jquery-ui-bundle/jquery-ui.min.css');
require('../scss/app.scss');
require('codemirror/lib/codemirror.css');
require('codemirror/theme/oceanic-next.css');
require('codemirror/addon/hint/show-hint.css');



$(document).ready(function () {
    var list_element = [];
    let image_module_id = 0;
    $('select').formSelect();
    // $('.fixed-action-btn').floatingActionButton();
    $(".btn-save-agrid-text-editor").hide();
    $("#add_a_new_route").hide();
    $('.tabs').tabs();
    // initEditor('textarea');
    // $('.text-editor').summernote();
    $('.modal').modal();

    sidenav_init();
    synchro_inputs();
    slider_init();
    // update_sortable_items();

    $('#select_lang').change(function () {
        location.href = $(this).val();
    });

    $('#content_mode').change(function () {
        location.href = $(this).val();
    });

    $("#screen-emulator-size").change(function () {

        $(".screen-emulator").removeClass("min-screen").removeClass("max-screen");

        if ($("#screen-emulator-size").is(":checked")) {
            $(".screen-emulator").addClass("max-screen");
        } else {
            $(".screen-emulator").addClass("min-screen");
        }
    });

    // $('#src-url-youtube').change(function () {
    //     callback_youtube_video();
    // });

    // if ($('.slider-custom-height')){
    //     let slider = $('.slider-custom-height');
    //     let element_height = $(slider).find('img');
    //     // console.log(slider.children());
    //     element_height.each(function(index, item){
    //         // let test = $(this).firstChild;
    //         console.log(index);
    //         // console.log($(this).height());
    //         console.log(item);
    //         console.log(item.height);
    //     })
    // }
});


function sidenav_init() {
    $(".sidenav").sidenav({
        onOpenStart: function () {
            $(".sidenav.opened").each(function () {
                $(this).close();
            });
        },
        onOpenEnd: function () {
            var id = $(this).attr("id");
            $("#" + id).addClass('opened');
        },
        onCloseStart: function () {
            var id = $(this).attr("id");
            $("#" + id).removeClass('opened');
        }
    });

    $('#sidenav-right').sidenav({
        edge: 'right',
    });
}

window.sidenav_init = sidenav_init;

function synchro_inputs() {
    $("#seo_title").keyup(function () {
        let newData = $("#seo_title").val();
        $("#seo_og_title").val(newData);
        $("#seo_twitter_title").val(newData);
    });

    $("#seo_description").keyup(function () {
        let newData = $("#seo_description").val();
        $("#seo_og_description").val(newData);
        $("#seo_twitter_description").val(newData);
    });

    $("#seo_og_image").keyup(function () {
        let newData = $("#seo_og_image").val();
        $("#seo_twitter_image").val(newData);
    });
}

window.synchro_inputs = synchro_inputs;

function slider_init() {
    $('.slider').slider({
        duration: 700
    });
    $('.carousel.carousel-slider').carousel({
        fullWidth: true,
        indicators: true
    });
    setInterval(function () {
        $('.carousel.carousel-slider').carousel('next');
    }, 4000);
}

window.slider_init = slider_init;


/********** < ROWS > **********/
function add_row($content_id, $col_id, $lang) {
    $.ajax({
        url: "/agrid/content/" + $content_id + "/row/add",
        type: 'POST',
        data: {
            col: $col_id,
            lang: $lang
        },
        success: function (data) {
            if ($col_id == 0)
                $(".screen-emulator").append(data);
            else
                $("#col-" + $col_id + " .sortable-rows").append(data);

            update_sortable_items();
        }
    });
}

window.add_row = add_row;

function update_sortable_items($content, $csrf_token) {
    $('select').formSelect();
    $('.dropdown-trigger').dropdown();

    $(".sortable-cols").sortable({
        connectWith: ".sortable-cols",
        cancel: ".disable-sorting",
        handle: ".handle-col",
        receive: function (event, ui) {
            let parentElement = ui.item[0].parentElement.id;
            let element = ui.item[0].id;

            $.ajax({
                url: '/agrid/content/' + $content + '/cols/switch',
                type: 'POST',
                data: {
                    token: $csrf_token,
                    row: parentElement,
                    col: element
                },
                success: function (data) {
                    update_col_order($content, parentElement, $csrf_token);
                }
            });
        },
        stop: function (event, ui) {
            let parentElement = ui.item[0].parentElement.id;
            update_col_order($content, parentElement, $csrf_token);
        }
    });

    $(".sortable-rows").sortable({
        cancel: ".disable-sorting",
        handle: ".handle-row",
        receive: function (event, ui) {
            let parentElement = ui.item[0].parentElement.id;
            let element = ui.item[0].id;
            console.log("receive", parentElement, element);

        },
        stop: function (event, ui) {
            let parentElement = ui.item[0].parentElement.id;
            update_row_order(parentElement, $content, $csrf_token);
        }
    });
}

window.update_sortable_items = update_sortable_items;

function update_row_order(parentElement, $content, $token) {
    let new_order = {};
    $("#" + parentElement + " .row").each(function (index) {
        new_order[index] = $(this).attr('id');
    });

    $.ajax({
        url: '/agrid/content/' + $content + '/rows/order',
        type: 'POST',
        data: {
            token: $token,
            rows: new_order
        },
        success: function (data) {
        }
    });
}

window.update_row_order = update_row_order;

function delete_row($content, $row_id, $token) {
    $.ajax({
        url: '/agrid/content/' + $content + '/row/delete', //"{{ path('agrid_page_delete_row',{'content':content.id}) }}",
        type: 'POST',
        data: {
            token: $token,
            row: $row_id
        },
        success: function (data) {
            $("#row-" + $row_id).remove();
        }
    });
}

window.delete_row = delete_row;

/********** < COLS > **********/
function add_col($content, $row_id, $lang, $mode) {
    $.ajax({
        url: '/agrid/page/' + $content + '/col/add',
        type: 'POST',
        data: {
            token: "{{ csrf_token(content.id) }}",
            row: $row_id,
            mode: $mode,
            lang: $lang
        },
        success: function (data) {
            $("#row-" + $row_id).html(data);
            update_sortable_items();
            location.reload();
        }
    });
}

window.add_col = add_col;

function set_col_size($content, $col_id, $size_int, $token, $mode) {
    $.ajax({
        url: '/agrid/page/' + $content + '/col/size',
        type: 'POST',
        data: {
            token: $token,
            col: $col_id,
            mode: $mode,
            size: $size_int
        },
        success: function (data) {
            $("#col-" + $col_id).attr('class', data);
            $("#col-mod-" + $col_id).text('s' + $size_int);
        }
    });
}

window.set_col_size = set_col_size;

function update_col_order($content, $parentElement, $token) {
    let new_order = {};
    $("#" + $parentElement + " .col").each(function (index) {
        new_order[index] = $(this).attr('id');
    });

    $.ajax({
        url: '/agrid/page/' + $content + '/cols/order',
        type: 'POST',
        data: {
            token: $token,
            row: $parentElement,
            cols: new_order
        },
        success: function (data) {

        }
    });
}

window.update_col_order = update_col_order;

function delete_col($content, $col_id, $token) {
    $.ajax({
        url: '/agrid/content/' + $content + '/col/delete',
        type: 'POST',
        data: {
            token: $token,
            col: $col_id
        },
        success: function (data) {
            $("#col-" + $col_id).remove();
        }
    });
}

window.delete_col = delete_col;

/********** < Modules > **********/
function select_module($content, $id_col, $mode, $lang) {
    $.ajax({
        url: '/agrid/module/select',
        type: 'post',
        data: {
            content: $content,
            id_col: $id_col,
            mode: $mode,
            lang: $lang
        },
        success: function (data) {
            $("#slide-module").html(data);
            $("#slide-module").sidenav("open");
        }
    });
}

window.select_module = select_module;

function add_module($content, $col_id, $type, $mode, $token, $lang) {
    // let lang = $('#select_lang').val();
    $.ajax({
        url: '/agrid/content/' + $content + '/module/add',
        type: 'POST',
        data: {
            token: $token,
            col: $col_id,
            type: $type,
            mode: $mode,
            lang: $lang
        },
        success: function (data) {
            $("#col-" + $col_id).replaceWith(data);
            $("#col-" + $col_id + " .btn-save-agrid-text-editor").hide();
            update_sortable_items();
            $("#slide-module").sidenav("close");
            location.reload();
        }
    });
}

window.add_module = add_module;

function editor(id) {
    $(".btn-open-agrid-text-editor").hide();
    $("#btn-save-agrid-text-editor-" + id).show();
    initEditor('#agrid-text-editor-' + id);


}

window.editor = editor;

function initEditor($selector){
    tinymce.init({
        selector: $selector,
        plugins: 'paste importcss searchreplace autolink directionality code visualblocks visualchars  link  codesample table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars emoticons',
        menubar: 'edit view insert format tools table help',
        toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | link codesample | ltr rtl',
        toolbar_sticky: false,
        language: 'fr_FR',
        // content_css: '//www.tiny.cloud/css/codepen.min.css',
        // link_list: [
        //     { title : "test", menu : [{ title: 'My page 1', value: 'http://www.tinymce.com' }, { title: 'My page 2', value: 'http://www.moxiecode.com' }]  }
        // ],
        importcss_append: true,
        height: 600,
        quickbars_insert_toolbar : 'quicktable',
        quickbars_selection_toolbar: 'bold italic | link h2 h3 blockquote quicktable',
        noneditable_noneditable_class: "mceNonEditable",
        toolbar_mode: 'sliding',

        init_instance_callback: function(editor) {
            editor.on('OpenWindow', function(e) {
                $('select').addClass("browser-default");
            });
        }

    });
}

window.initEditor =initEditor;

function save_editor($module_id, $lang, $mode) {
    $(".btn-save-agrid-text-editor").hide();
     let markup = tinymce.get("agrid-text-editor-" + $module_id).getContent();

    tinymce.remove("#agrid-text-editor-" + $module_id);
    $(".btn-open-agrid-text-editor").show();

    $.ajax({
        url: '/agrid/content/' + $module_id + '/col/module/save-editor', //"{{ path('agrid_page_col_save_editor',{'content':content.id}) }}",
        type: 'POST',
        data: {
            token: "{{ csrf_token(content.id) }}",
            lang: $lang,
            mode: $mode,
            html: markup
        },
        success: function (data) {

        }
    });
}

window.save_editor = save_editor;

function open_module($module_public_key, $lang) {

    $.ajax({
        url: '/agrid/module/init',  //'{{ path('agrid_module_init') }}',
        type: 'post',
        data: {
            module_public_key: $module_public_key,
            lang: $lang
        },
        success: function (data) {

            $("#slide-module").html(data);

            $("#slide-module").sidenav("open");
            $('select').formSelect();
            // module_title();
            M.updateTextFields();
            get_news_list_by_feed();
            $('.modal').modal();
            // $('.carousel.carousel-slider').carousel({
            //     fullWidth: true,
            //     indicators: true
            // });
        }
    });
}

window.open_module = open_module;

function validate_title($module_id, $lang) {
    let $twig = $('#title-type').val();
    $("#slide-module").sidenav("close");
    $.ajax({
        url: '/agrid/module/' + $module_id + '/validate/title',
        type: 'post',
        data: {
            title_type: $twig,
            title_content: $('#title-text').val(),
            title_class: $('#title_class').val(),
            lang: $lang
        },
        success: function (data) {
            $('#module-content-' + $module_id).html(data);
        }
    });
}

window.validate_title = validate_title;

/********** - FileManager - **********/

function show_files_manager($callback_function, $lang, $directoryName) {

    $.ajax({
        url: '/file-manager/directory/all-files',
        type: 'post',
        data: {
            callback_function: $callback_function,
            lang: $lang,
            directoryName: $directoryName
        },
        success: function (data) {
            let sidenav_right = $('#sidenav-right');
            $('#right-sidenav-content').html(data);
            sidenav_right.sidenav({
                edge: 'right',
            });
            sidenav_right.sidenav('open');
            // $('.fixed-action-btn').floatingActionButton();

            updateFormUploadComponent();
        }
    });
}

window.show_files_manager = show_files_manager;


// Check image function
function check_image(element, callback_function, $lang, $module = null) {
    // let check_box_element = $('i:first', element),
    let parent_element = $(element).parent(),
        image_material_boxed = $('img:first', parent_element);
    // wrapper_images_selected = '.wrapper_images_selected';

    if (callback_function !== '') {
        let photo_guid = image_material_boxed.attr('data-id');
        let fn = callback_function + '("' + photo_guid + '","' + $lang + '")';
        eval(fn);
    }

}

window.check_image = check_image;

// show image
// function show_image_box(element){
//     let parent_element = $(element).parent(),
//         image_material_boxed = $('img:first', parent_element);
//
//     $(image_material_boxed).materialbox();
//     $(image_material_boxed).materialbox('open');
// }
// window.show_image_box = show_image_box;

function module_callback_photos(file_guid, $lang) {
    let module_id = $("#module_public_key").val();
    $("#slide-photos").sidenav("close");

    $.ajax({
        url: '/agrid/module/photos/callback',
        type: 'post',
        data: {
            module_public_key: module_id,
            file_guid: file_guid,
            lang: $lang
        },
        success: function (data) {
            $("#guid_images_selected-" + module_id).val(file_guid);
            $('#wrapper_images_selected-' + module_id).html(data);
        }
    });
}

window.module_callback_photos = module_callback_photos;

function validate_photo($module_id, $lang) {
    $.ajax({
        url: '/agrid/module/' + $module_id + '/photo/validate',
        type: 'post',
        data: {
            file_guid: $('#guid_images_selected-' + $module_id).val(),
            lang: $lang
        },
        success: function (data) {
            $('#module-content-' + $module_id).html(data);
            $("#slide-module").sidenav('close');
            $('#sidenav-right').sidenav('close');
        }
    });
}

window.validate_photo = validate_photo;


function module_callback_slider($file_guid) {
    list_element.forEach(function (item, index, array) {
        let position = list_element.indexOf($file_guid);
        if (list_element[index] === '') {
            list_element[index] = $file_guid;
        } else if (list_element[position] !== $file_guid) {
            list_element.push($file_guid);
        }
    });

    module_slider_list_images();
}

window.module_callback_slider = module_callback_slider;

function module_slider_list_images() {
    let module_id = $('#module_id_slider').val();
    $.ajax({
        url: '/agrid/module/' + module_id + '/materialize-slider/list-photos',
        type: 'post',
        data: {
            list_images: list_element
        },
        success: function (data) {
            $("#module-slider-" + module_id).html(data);

        }
    });
}

function edit_image_slider($module_id, $image_guid, $lang) {
    let sidenav_right = $('#sidenav-right');

    $.ajax({
        url: '/agrid/module/' + $module_id + '/materialize-slider/edit-photo',
        type: 'post',
        data: {
            image_guid: $image_guid,
            lang: $lang
        },
        success: function (data) {
            $('#right-sidenav-content').html(data);
            sidenav_right.sidenav({
                edge: 'right',
            });
            sidenav_right.sidenav('open');
            M.updateTextFields();
            $('.tabs').tabs();
            // $('.text-editor').summernote();
        }
    });
}

window.edit_image_slider = edit_image_slider;

function validate_materialize_slider() {
    let module_id = $('#module_id_slider').val();
    $("#slide-module").sidenav('close');
    $('#sidenav-right').sidenav('close');
    $.ajax({
        url: '/agrid/module/' + module_id + '/materialize-slider/validate',
        type: 'post',
        data: {
            list_images: list_element
        },
        success: function (data) {
            $('#module-content-' + module_id).html(data);
            $('.slider').slider({
                duration: 700
            });
        }
    });
}

window.validate_materialize_slider = validate_materialize_slider;

function update_slider_image_editor($module_id, $file_guid, $lang) {
    $.ajax({
        url: '/agrid/module/' + $module_id + '/materialize-slider-image-editor/validate',
        type: 'post',
        data: {
            file_guid: $file_guid,
            lang: $lang,
            // left_content: $('#text-editor-left-content').summernote('code'),
            // center_content: $('#text-editor-center-content').summernote('code'),
            // right_content: $('#text-editor-right-content').summernote('code')
        },
        success: function (data) {
            // $('#slider-image-parameters-'+$file_guid).html(data);
            $('#sidenav-right').sidenav('close');
        }
    });
}

window.update_slider_image_editor = update_slider_image_editor;

function remove_image_from_slider_list($module_id, $image_guid, $lang) {
    $('#' + $image_guid).remove();
    let position = list_element.indexOf($image_guid);
    list_element.splice(position, 1);

    if (list_element.length === 0)
        list_element = [''];

    // remove parameters if exist
    $.ajax({
        url: '/agrid/module/' + $module_id + '/materialize-slider-image/delete',
        type: 'post',
        data: {
            file_guid: $image_guid,
            lang: $lang
        },
        success: function (data) {
        }
    });

}

window.remove_image_from_slider_list = remove_image_from_slider_list;

function module_callback_video(file_guid, $lang) {
    let module_id = $("#module_id_slider").val();
    $("#slide-photos").sidenav("close");

    $.ajax({
        url: '/agrid/module/videos/callback',
        type: 'post',
        data: {
            module_public_key: module_id,
            file_guid: file_guid,
            lang: $lang
        },
        success: function (data) {
            $('#wrapper_video_selected-' + module_id).html(data);
        }
    });
}

window.module_callback_video = module_callback_video;

function validate_video($module_id, $lang) {

    console.log('validate_video', '/agrid/module/' + $module_id + '/videos/validate');

    $.ajax({
        url: '/agrid/module/' + $module_id + '/videos/validate',
        type: 'post',
        data: {
            video: $('#guid_video_selected-' + $module_id).val(),
            lang: $lang,
            thumbnail: $('#guid_video_thumbnail-' + $module_id).val(),
            controls: $('#controls-parameter').is(':checked'),
            autoplay: $('#autoplay-parameter').is(':checked'),
            loop: $('#loop-parameter').is(':checked'),
            muted: $('#muted-parameter').is(':checked')
        },
        success: function (data) {
            $('#module-content-' + $module_id).html(data);
            $("#slide-module").sidenav('close');
            $('#sidenav-right').sidenav('close');
        }
    });
}

window.validate_video = validate_video;

function callback_youtube_video() {
    let module_id = $('#module-video-youtube').val();
    $.ajax({
        url: '/agrid/module/' + module_id + '/videos-youtube/callback',
        type: 'post',
        data: {
            video_id: '',
            url: $('#src-url-youtube').val(),
            autoplay: $('#autoplay-parameter').is(':checked'),
            allowfullscreen: $('#allowfullscreen-parameter').is(':checked')
        },
        success: function (data) {
            $('#wrapper-youtube-video-preview-' + module_id).html(data);

        }
    });
}

window.callback_youtube_video = callback_youtube_video;

function validate_youtube_video($module_id, $lang) {
    $.ajax({
        url: '/agrid/module/' + $module_id + '/videos-youtube/validate',
        type: 'post',
        data: {
            video_id: '',
            lang: $lang,
            url: $('#src-url-youtube').val(),
            autoplay: $('#autoplay-parameter').is(':checked'),
            allowfullscreen: $('#allowfullscreen-parameter').is(':checked')
        },
        success: function (data) {
            $('#module-content-' + $module_id).html(data);
            $("#slide-module").sidenav('close');
            $('#sidenav-right').sidenav('close');
        }
    });
}

window.validate_youtube_video = validate_youtube_video;

// Module News
function create_news_feed() {
    let feed_name = $('#feed-name').val(),
        news_feeds_list_select = $('#news-feeds-list');

    $.ajax({
        url: '/agrid/module/news-feed/create-feed',
        type: 'post',
        data: {
            feed_name: feed_name
        },
        success: function (data) {
            $('#news-feeds-list').append(data);
            $("#add-new-feed-modal").modal('close');
            $(news_feeds_list_select).formSelect();


        }
    });
}

window.create_news_feed = create_news_feed;

function get_news_list_by_feed() {
    // News Feeds change event listener
    $('#news-feeds-list').change(function () {
        let feed_id = $(this).val(),
            news_feeds_list_select = $('#news-feeds-list'),
            module_id = $('#module_public_key').val();
        if (feed_id !== ""){
            // $('#module-add-news').removeClass('disabled');
            $('#set-the-parameters-of-news-display').removeClass('disabled');
        }


        $.ajax({
            url: '/agrid/module/' + module_id + '/news/list-by-feed',
            type: 'post',
            data: {
                feed_id: feed_id
            },
            success: function (data) {
                $('#news-list-content').html(data);
            }
        });
    });
}

window.get_news_list_by_feed = get_news_list_by_feed;

function add_news($module_id, $lang) {
    let feed_id = $('#news-feeds-list').val(),
        news_admin_right_sidenav = $('#news-admin-sidenav-right');

    news_admin_right_sidenav.sidenav({
        edge: 'right',
    });

    $.ajax({
        url: '/agrid/module/' + $module_id + '/create-news',
        type: 'post',
        data: {
            feed_id: feed_id,
            lang: $lang
        },
        success: function (data) {
            $('#news-admin-sidenav-content').html(data);
            news_admin_right_sidenav.sidenav('open');
        }
    });
}

window.add_news = add_news;

function set_parameters_of_news_display($module_id, $lang) {
    let feed_id = $('#news-feeds-list').val(),
        sidenav_right = $('#sidenav-right'),
        code_editor = $('#area-code-editor'),
    myModeSpec = {
        name: "htmlmixed",
        tags: {
            style: [["type", /^text\/(x-)?scss$/, "text/x-scss"],
                    [null, null, "css"]],
            custom: [[null, null, "customMode"]]
        }
    };

    sidenav_right.sidenav({
        edge: 'right',
    });
    $.ajax({
        url: '/agrid/module/' + $module_id + '/news-parameters',
        type: 'post',
        data: {
            feed_id: feed_id,
            lang: $lang
        },
        success: function (data) {
            $('#right-sidenav-content').html(data);
            sidenav_right.sidenav('open');
            $('.modal').modal();
            let code = $('#area-code-editor')[0];
            // let editor = CodeMirror(document.getElementById("area-code-editor"),{
            let editor = CodeMirror.fromTextArea(code,{
            //     value: "#test {\n\tposition: absolute;\n\twidth: auto;\n\theight: 50px;\n}",
            //     mode: "twig",
                mode: myModeSpec,
                theme: "oceanic-next",
                // tabSize: 5,
                lineNumbers: true,
                extraKeys: {"Ctrl-Space": "autocomplete"}
            });
            // let editor = CodeMirror.fromTextArea(code, {
            //     lineNumbers: true
            // });
        }
    });
}
window.set_parameters_of_news_display = set_parameters_of_news_display;