/**
 * An element which displays a datetime picker.
 */
angular.module('quay').directive('datetimePicker', function () {
  var directiveDefinitionObject = {
    priority: 0,
    templateUrl: '/static/directives/datetime-picker.html',
    replace: false,
    transclude: true,
    restrict: 'C',
    scope: {
      'datetime': '=datetime',
    },
    controller: function($scope, $element) {
       $scope.entered_datetime = null;

       $(function() {
         $element.find('input').datetimepicker({
           'format': 'LLL',
           'sideBySide': true,
           'showClear': true,
           'minDate': new Date()
         });

         $element.find('input').on("dp.change", function (e) {
            $scope.datetime = e.date ? e.date.unix() : null;
         });
       });

       $scope.$watch('entered_datetime', function(value) {
         if (!value) {
           if ($scope.datetime) {
             $scope.datetime = null;
           }
           return;
         }

         $scope.datetime = (new Date(value)).getTime()/1000;
       });

       $scope.$watch('datetime', function(value) {
         if (!value) {
           $scope.entered_datetime = null;
           return;
         }

         $scope.entered_datetime = moment.unix(value).format('LLL');
       });
    }
  };
  return directiveDefinitionObject;
});