/*-
 * ~~~~~~licensing~~~~~~
 * entaxy-management-plugin
 * ==========
 * Copyright (C) 2020 - 2021 EmDev LLC
 * ==========
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ~~~~~~/licensing~~~~~~
 */
var Entaxy;
(function (Entaxy) {
    Entaxy._module
    .component('firstStepModalTest', {
        bindings: {
            templates: '<',
            selected: '<',
            changeSelection: '<',
            filter: '<'
        },
        template:
        `
          <div style="height: 473px; max-height: 473px; display: flex; flex-direction: column;">
            <div class="modal-body-filter-header" style="flex: auto; padding-left: 20px; padding-right: 20px;">
              <!--div class="col-md-12"-->
                <pf-toolbar class="entaxy-template-toolbar" config="$ctrl.toolbarConfig"></pf-toolbar>
              <!--/div-->
            </div>
            <div class="modal-list-list-container" style="height:385px; max-height:385px; min-height:200px; overflow-y:auto; flex:initial;">
              <pf-list-view class="entaxy-template-list" items="$ctrl.viewedTemplates" config="$ctrl.listConfig">
                <div class="list-view-pf-description">
                  <div class="list-group-item-heading">
                    {{item.name}}
                  </div>
                </div>
              </pf-list-view>
            </div>
          </div>
        `,
        controller: firstStepModalTestController
    })
    .name;

    function firstStepModalTestController() {
        'ngInject';

        var ctrl = this;

        ctrl.$onInit = function() {
            ctrl.viewedTemplates = ctrl.templates;
            ctrl.toolbarConfig.filterConfig.resultsCount = ctrl.viewedTemplates.length;

            Entaxy.log.info('SELECTED ' + JSON.stringify(ctrl.selected));
            // FIXME i don't like invoking of changeSelection somehow
            if (ctrl.selected) {
                ctrl.listConfig.selectedItems = [ ctrl.selected ];
                changeSelection();
            }
        }

        ctrl.toolbarConfig = {
            filterConfig: {
                fields: [
                    {
                        id: 'name',
                        title: 'Name',
                        placeholder: 'Filter by Name...',
                        filterType: 'text'
                    }
                ],
                appliedFilters: [],
                onFilterChange: filterChange
            },
            actionsConfig: {}
        };

        function filterChange(filters) {
            applyFilters(filters);
            ctrl.toolbarConfig.filterConfig.resultsCount = ctrl.viewedTemplates.length;
        };

        function applyFilters(filters) {
            ctrl.viewedTemplates = [];
            if (filters && filters.length > 0) {
                ctrl.templates.forEach(function (template) {
                    if (matchesFilters(template, filters)) {
                        ctrl.viewedTemplates.push(template);
                    }
                });
            } else {
                ctrl.viewedTemplates = ctrl.templates;
            }
        };

        function matchesFilters(item, filters) {
            var matches = true;
            filters.forEach(function(filter) {
                if (!matchesFilter(item, filter)) {
                    matches = false;
                    return matches;
                }
            });
            return matches;
        };

        function matchesFilter(item, filter) {
            if (ctrl.filter) {
                return ctrl.filter(item, filter);
            } else {
                var match = true;
                if (filter.id === 'name') {
                    match = item.name.match(filter.value) !== null;
                }
                return match;
            }
        };

        ctrl.listConfig = {
            selectionMatchProp: 'name',
            selectItems: true,
//            selectedItems: [ { name: 'test' } ], // ctrl.selected ? [ ctrl.selected ] : [],
            showSelectBox: false,
            onSelectionChange: changeSelection
        }

        function changeSelection() {
            ctrl.changeSelection(ctrl.listConfig.selectedItems[0]);
        }

    }
    firstStepModalTestController.$inject = [];

})(Entaxy || (Entaxy = {}));