import * as d3 from './d3-custom';
import { Controller } from './controller';

// Using postcss, see rollup.config.js for configuration
import '../css/main.css';

function riskLadder() {

    let controller = undefined;
    let catSelector = undefined;

    init();

    function init() {

        controller = new Controller();
        controller.init();

        catSelector = d3.select('#category');

        catSelector.on('change', filterByCategory);

        function filterByCategory() {
            controller.setCategory(this.value);
        }

        d3.select('body').on('keydown', scrollNavigation);

        d3.select(window).on('scroll', scrolled);

        d3.selectAll('select#geschlecht, select#alter').on('change', function() {
            controller.filterSelectionChanged();
        });

        d3.select('#search').on('focus', function() {
            d3.select('body').on('keydown', null);
        });

        d3.select('#search').on('blur', function() {
            d3.select('body').on('keydown', scrollNavigation);
        });
    }

    function scrollNavigation(event) {
        if(event.keyCode === 38 || event.keyCode === 40) {  // scroll to previous / next entry

            switch(event.keyCode) {
                case 38:
                    controller.scrollToEntry(controller.previousEntry());
                    break;
                case 40:
                    controller.scrollToEntry(controller.nextEntry());
                    break;
            }

            event.preventDefault();
        }
    }

    function scrolled() {
        controller.scrolled();
    }
}

riskLadder();
