angular
    .module('kalendae.kalendaeDirective', [])
    .factory('kal', function ($window) {
        return $window.Kalendae;
    })
    .directive('kalendae', function (kal, $parse) {
        return {
            restrict: 'A',
            scope: {
                modelFrom: '=',
                modelTo: '=?',
            },
            link: function (scope, element, attrs) {
                // -> Create Kalendae object, depending on the type of object
                var type       = attrs.kalendae === 'dropdown' ? kal.Input : kal;
                var datePicker = new type(element[0], {
                    mode       : attrs.mode        || 'single',
                    months     : attrs.months      || 1,
                    weekStart  : attrs.weekStart   || 0,
                    direction  : attrs.direction   || 'any',
                    blackout   : attrs.blackout    || false,
                    useYearNav : attrs.useYearNav  || true,
                    format     : attrs.format      || 'X'
                });

                // -> Watch our models for changes (if a date is selected)
                scope.$watchCollection('[modelFrom, modelTo]', function (newValues) {
                    console.log(newValues);
                });

                /**
                 * Subscribe to the datePicker events & set the models accordingly
                 * @param  {date} date The selected date object
                 */
                datePicker.subscribe('change', function (date) {
                    var selectedDates = datePicker.getSelectedRaw();

                    if (datePicker.settings.mode == 'single') {
                        scope.$apply( function() {
                           scope.modelFrom = selectedDates[0]; // <--- ERROR
                        });

                        // When using the dropdown datepicker, hide after selecting a date.
                        attrs.kalendae === 'dropdown' && element[0].blur();
                    } else if (datePicker.settings.mode == 'range') {
                        scope.modelFrom = selectedDates[0];

                        if (typeof selectedDates[1] != 'undefined') {
                            scope.modelTo = selectedDates[1]; // <--- ERROR

                            // When using the dropdown datepicker, hide after selecting a date.
                            attrs.kalendae === 'dropdown' && element[0].blur();
                        }
                    } else {
                        console.log('Selecting date ranges not yet implemented in the directive, please do! :)');
                    }
                });
            }
        };
    });