{#
/**
 * Copyright (C) 2020 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}

<script type="text/javascript">

    // Runs after form opens
    function chart_form_edit_open() {

        if($(this).find('form').data('formStep') === 1) {
            // If data set exists, set the drop-down to that value
            var dataSetId = $(this).find('form').data().elementOptions.dataSetId;

            if(dataSetId !== undefined) {
                $(this).find('#dataSetId').val(dataSetId);
            }
        } else if($(this).find('form').data('formStep') === 2) {
            formHelpers.setupCheckboxInputFields($(this).find('form'), '#useDuration', '.duration-fields');

            // Set order and filtering clauses fields, using the helper ()
            formHelpers.setupCheckboxInputFields($(this).find('form'), '#useOrderingClause', '.order-clause-field', '#orderClause');
            formHelpers.setupCheckboxInputFields($(this).find('form'), '#useFilteringClause', '.filter-clause-field', '#filterClause');

            // Setup show legend fields
            formHelpers.setupCheckboxInputFields($(this).find('form'), '#showLegend', '.legend-fields');

            graphFormSetup(this);
        }
    }

    // Runs before form submit
    function chart_form_edit_submit() {
        
        if($(this).find('form').data('formStep') === 2) {
            var form = $("#graphEditFormStep2");

            // Clean the previous generated hidden dataSetColumns from the form
            form.find('input[name="dataSetColumnId[]"]').remove();

            // Add all the selected columns to the form as hidden input fields
            $($("#columnsIn").sortable('toArray')).each(function() {
                form.append('<input type="hidden" name="dataSetColumnId[]" value="' + this + '" />');
            });

            form.data("apply", true);
            
            formHelpers.updateCKEditor();
        }
    }

    // Graph specific params setup
    function graphFormSetup(dialog) {

        var $graphConfig = $("#graphConfig", dialog);

        // Get template
        var graphConfigTemplate = formHelpers.getTemplate('chartGraphConfigTemplate');

        var columnTypeOptions = [
            {
                id: "x-axis",
                value: "{% trans "X-Axis" %}"
            },{
                id: "y-axis",
                value: "{% trans "Y-Axis" %}"
            },{
                id: "series-identifier",
                value: "{% trans "Series Identifier" %}"
            }
        ];

        if (dialog.data().extra.config.length === 0) {
            // No existing config, so we add a row to our config div
            context = {
                columns: dialog.data().extra.columns,
                columnTypeOptions: columnTypeOptions,
                title: "1",
                columnType: "",
                dataSetColumnId: "",
                buttonGlyph: "fa-plus"
            };
            $graphConfig.append(graphConfigTemplate(context));
        } else {
            // For each of the existing config options, create form components
            var j = 0;
            $.each(dialog.data().extra.config, function (index, field) {
                j++;

                var context = {
                    columns: dialog.data().extra.columns,
                    columnTypeOptions: columnTypeOptions,
                    title: j,
                    columnType: field.columnType,
                    dataSetColumnId: parseInt(field.dataSetColumnId),
                    buttonGlyph: ((j === 1) ? "fa-plus" : "fa-minus")
                };

                $graphConfig.append(graphConfigTemplate(context));
            });
        }

        // Nabble the resulting buttons
        $graphConfig.on("click", "button", function (e) {
            e.preventDefault();

            // find the gylph
            if ($(this).find("i").hasClass("fa-plus")) {
                var context = {
                    columns: dialog.data().extra.columns,
                    columnTypeOptions: columnTypeOptions,
                    title: $graphConfig.find('.form-group').length + 1,
                    columnType: "",
                    dataSetColumnId: "",
                    buttonGlyph: "fa-minus"
                };
                $graphConfig.append(graphConfigTemplate(context));
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });

        // Series Colors
        var $seriesColors = $("#seriesColors", dialog);

        // Get template
        var seriesColorsTemplate = formHelpers.getTemplate('chartColorsTemplate');

        if (dialog.data().extra.seriesColors.length === 0) {
            // No existing config, so we add a row to our config div
            context = {
                title: "1",
                color: "",
                buttonGlyph: "fa-plus"
            };
            $seriesColors.append(seriesColorsTemplate(context));

            createColorPicker($seriesColors.find('.color-picker'), {format: "hex"});
        } else {
            // For each of the existing config options, create form components
            var j = 0;
            $.each(dialog.data().extra.seriesColors, function (index, field) {
                j++;

                var context = {
                    title: j,
                    color: field,
                    buttonGlyph: ((j === 1) ? "fa-plus" : "fa-minus")
                };

                $seriesColors.append(seriesColorsTemplate(context));
            });

            createColorPicker($seriesColors.find('.color-picker'), {format: "hex"});
        }

        // Nabble the resulting buttons
        $seriesColors.on("click", "button", function (e) {
            e.stopPropagation();

            // find the gylph
            if ($(this).find("i").hasClass("fa-plus")) {
                var context = {
                    title: $seriesColors.find('.form-group').length + 1,
                    color: "",
                    buttonGlyph: "fa-minus"
                };
                $seriesColors.append(seriesColorsTemplate(context));

                createColorPicker($seriesColors.find('.color-picker'), {format: "hex"});
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });
                // Configure the query for sorting and filtering
        formHelpers.configureQueryBuilder(dialog, datasetQueryBuilderTranslations);

        // Fill the font colour in with a complimentary colour (if it isn't already filled in)
        var $fontInput = $("#fontColor", dialog);
        var mainObjectBGColor = (formHelpers.mainObject !== undefined) ? formHelpers.mainObject.backgroundColor : formHelpers.defaultBackgroundColor;

        if ($fontInput.val() == "") {
            // Choose a complementary color
            var color = $c.complement(mainObjectBGColor);

            $fontInput.val(color);
        }

        // Set up the colour selectors
        createColorPicker($("#backgroundColor", dialog), {format: "hex"});

        createColorPicker($fontInput, {format: "hex"});

        // Tidy up colorpickers on modal close
        if(dialog.hasClass('modal')) {
            dialog.on("hide.bs.modal", function(e) {
                if(e.namespace === 'bs.modal') {
                    // Remove colour pickers                    
                    destroyColorPicker(dialog.find(".colorpicker-element"));
                }
            });
        }
    }
</script>