/* eslint-disable react/no-render-return-value */

import React from 'react';
import ReactDOM from 'react-dom';
import {replaceUrls} from '../../contacts/helpers';
import {ContactFormContainer as ContactFormContainerComponent} from '../../contacts/components/Form';

ContactEditorDirective.$inject = [
    'contacts',
    'notify',
    'privileges',
    'metadata',
    '$filter',
    'Keys',
    '$rootScope',
    'lodash',
];

export function ContactEditorDirective(
    contacts,
    notify,
    privileges,
    metadata,
    $filter,
    Keys,
    $rootScope,
    _,
) {
    // contains all the injected services to be passed down to child
    // components via props
    const services = {
        contacts: contacts,
        notify: notify,
        privileges: privileges,
        metadata: metadata,
    };

    return {
        scope: {
            origContact: '=contact',
            oncancel: '&',
        },
        link: function(scope, elem) {
            scope.onCancel = function() {
                scope.$applyAsync(() => {
                    scope.oncancel();
                });
            };

            var contactFormContainer = React.createElement(ContactFormContainerComponent,
                angular.extend({
                    svc: services,
                    contact: scope.origContact,
                    onCancel: scope.onCancel,
                    formClass: 'side-panel side-panel--shadow-right side-panel--bg-00',
                }),
            );

            var contactFormComponent = ReactDOM.render(contactFormContainer, elem[0]);

            scope.$watch('origContact', () => {
                const origContact = replaceUrls(scope.origContact);

                contactFormComponent.setState({
                    originalContact: origContact,
                    currentContact: origContact,
                });
            });

            // remove react elem on destroy
            scope.$on('$destroy', () => {
                elem.off();
                ReactDOM.unmountComponentAtNode(elem[0]);
            });
        },
    };
}