(function () {
    'use strict';

    angular
    .module('editorRotas')
    .directive('clockPickerInterval', clockPickerInterval);

    // use html
        // <clock-picker-interval
        //     ng-model-start="horaInicioHistoricoSetor" clock-options-start="horaInicioHistoricoSetorOptions"
        //     ng-model-end="horaFimHistoricoSetor" clock-options-end="horaFimHistoricoSetorOptions">
        // </clock-picker-interval>

   // use controller
       // $scope.horaInicioHistoricoSetor = '00:00'
       // $scope.horaInicioHistoricoSetorOptions = {
       //     minTime: -10,
       //     maxTime: '+1M +10D',
       //     status: 'enabled'
       // };
       //
       // $scope.horaFimHistoricoSetor = '00:00'
       // $scope.horaFimHistoricoSetorOptions = {
       //     minTime: -10,
       //     maxTime: '+1M +10D',
       //     status: 'enabled'
       // };

    function clockPickerInterval() {
        var directive = {
            restrict: 'AE',
            replace: true,
            templateUrl:   'angular/EditorRotas/app/scripts/components/clock-picker-interval/clock-picker-interval.directive.html',
            link: link,
            scope: {
                ngModelStart: '=',
                clockOptionsStart: '=',
                ngModelEnd: '=',
                clockOptionsEnd: '=',
            },
        };

        function link(scope, element, attr, ctrl) {
            var inputStart = element.find('.time-start');
            var inputEnd = element.find('.time-end');
            var icons = element.find('i');

            inputStart.clockpicker({
                donetext: 'Selecionar',
                init: function() {
                    console.log("colorpicker initiated");
                },
                beforeShow: function() {
                    console.log("before show");
                },
                afterShow: function() {
                    console.log("after show");
                },
                beforeHide: function() {
                    console.log("before hide");
                },
                afterHide: function() {
                    console.log("after hide");
                },
                beforeHourSelect: function() {
                    console.log("before hour selected");
                },
                afterHourSelect: function() {
                    console.log("after hour selected");
                },
                beforeDone: function() {
                    console.log("before done");
                },
                afterDone: function() {
                    console.log("after done");
                },
                minTime: scope.clockOptionsStart.minTime,
                maxTime: scope.clockOptionsStart.maxTime,
            });

            inputEnd.clockpicker({
                donetext: 'Selecionar',
                minTime: scope.clockOptionsEnd.minTime,
                maxTime: scope.clockOptionsEnd.maxTime
            });

            icons.on('click',function(){
                if(inputStart.is(':focus')){
                    inputStart.trigger('blur');
                } else {
                    inputStart.trigger('focus');
                }
            });
        }

        return directive;
    }
})();
