import React from 'react';
import ReactDOM from 'react-dom';

module.exports = 'component-wrapper';

angular
    .module('component-wrapper', [])
    .directive('componentWrapper', directive);

function directive() {

    return {
        restrict: 'E',
        scope: {
            component: '&',
            props: '='
        },
        link: link
    }

    function link(scope, element, attr) {

        var TargetComponent = scope.component();

        scope.$watch('props', (newProps, oldProps) => {

            if (newProps === oldProps) return;

            ReactDOM.render(
                <TargetComponent { ...newProps }/>,
                element[0]
            );
        });

        scope.$on('$destroy', () => {
            ReactDOM.unmountComponentAtNode(element[0])
        });
    }
}