angular.module('View.Directive')
    .directive('file', function () {
        return {
            scope: {
                readFile: '&',

                /**
                 * Optional property in isolate scope, expect this to be an object with a "show" boolean property.
                 * Will clear the file input when the show property is changed to false.
                 */
                displayOption: '=?'
            },
            link: function ($scope, element, attrs) {
                element.bind('change', function (event) {
                    $scope.file = event.target.files[0];
                    $scope.readFile({ file: $scope.file });
                });
                if (angular.isDefined($scope.displayOption)) {
                    //console.log('displayOption is defined for element, monitor it for changes');
                    $scope.$watch('displayOption.show', function (newValue) {
                        //console.log('displayOption changed to');
                        //console.log(newValue);
                        if (angular.isDefined(newValue) && !newValue) {
                            //console.log('displayOption is hidden, clear file input');
                            element.val(null);
                        }
                    })
                } else {
                    //console.log('displayOption is not defined, no need to monitor it for changes');
                }
            }
        };
    });