import ngModule from '../module';
import template from './uvc.html';
import './uvc.scss';

directive.$inject = ['$http', '$compile', 'vnApp', '$translate'];
export function directive($http, $compile, vnApp, $translate) {
    function getHeaderList($element, $scope) {
        let allHeaders = $element[0].querySelectorAll(`vn-th[field], vn-th[th-id]`);
        let headerList = Array.from(allHeaders);
        let ids = [];
        let titles = {};

        headerList.forEach(header => {
            let id = header.getAttribute('th-id') || header.getAttribute('field');
            ids.push(id);
            titles[id] = header.innerText || id.charAt(0).toUpperCase() + id.slice(1);
        });

        $scope.fields = ids;
        $scope.titles = titles;

        return headerList;
    }

    function getTableConfig(tableCode) {
        return $http.get(`/api/UserConfigViews/getConfig?tableCode=${tableCode}`);
    }

    function createViewConfig(config, fields) {
        fields.forEach(field => {
            if (config.configuration[field] == null)
                config.configuration[field] = true;
        });
    }

    function addHideClass($scope, headerList, userConfig) {
        let selectors = [];
        Object.keys(userConfig.configuration).forEach(key => {
            let index;
            if (userConfig.configuration[key] === false) {
                index = headerList.findIndex(el => {
                    return (el.getAttribute('th-id') == key || el.getAttribute('field') == key);
                });

                let baseSelector = `vn-table[vn-uvc=${userConfig.tableCode}] > div`;
                selectors.push(`${baseSelector} vn-thead > vn-tr > vn-th:nth-child(${index + 1})`);
                selectors.push(`${baseSelector} vn-tbody > vn-tr > vn-td:nth-child(${index + 1})`);
                selectors.push(`${baseSelector} vn-tbody > .vn-tr > vn-td:nth-child(${index + 1})`);
            }
        });


        if ($scope.css || document.querySelector('style[id="uvc"]')) {
            let child = document.querySelector('style[id="uvc"]');
            child.parentNode.removeChild(child);
        }

        if (selectors.length) {
            let rule = selectors.join(', ') + '{display: none;}';
            $scope.css = document.createElement('style');
            $scope.css.setAttribute('id', 'uvc');
            document.head.appendChild($scope.css);
            $scope.css.appendChild(document.createTextNode(rule));
        }

        $scope.$on('$destroy', () => {
            if ($scope.css && document.querySelector('style[id="uvc"]')) {
                let child = document.querySelector('style[id="uvc"]');
                child.parentNode.removeChild(child);
            }
        });
    }

    function saveConfiguration(tableConfiguration) {
        tableConfiguration.configuration = JSON.parse(JSON.stringify(tableConfiguration.configuration));
        return $http.post(`/api/UserConfigViews/save`, tableConfiguration);
    }

    return {
        restrict: 'A',
        link: async function($scope, $element, $attrs) {
            let cTemplate = $compile(template)($scope)[0];
            $scope.$ctrl.showUvc = event => {
                event.preventDefault();
                event.stopImmediatePropagation();
                $scope.uvc.show();
            };

            let tableCode = $attrs.vnUvc.trim();
            let headerList = getHeaderList($element, $scope);

            let defaultConfigView = {tableCode: tableCode, configuration: {}};
            let userView = await getTableConfig(tableCode);
            let config = userView.data || defaultConfigView;

            $scope.tableConfiguration = config;
            createViewConfig(config, $scope.fields);

            addHideClass($scope, headerList, config);

            let table = document.querySelector(`vn-table[vn-uvc=${tableCode}]`);

            table.insertBefore(cTemplate, table.firstChild);
            $scope.$ctrl.saveConfiguration = async tableConfiguration => {
                let newConfig = await saveConfiguration(tableConfiguration);
                vnApp.showSuccess($translate.instant('Data saved!'));
                addHideClass($scope, headerList, newConfig.data);
                $scope.uvc.hide();
            };
        }
    };
}
ngModule.directive('vnUvc', directive);