import { View } from 'backbone.marionette';
import { createElement } from 'react';
import ReactDOM from 'react-dom';

/**
 * Wrapper for React views
 *
 * @class ReactView
 * @extends Mn.View
 */
export class ReactView extends View {
    render () {
        if (!this.reactComponent) {
            throw new Error('BackboneReactView requires "reactComponent" attribute');
        }

        ReactDOM.render(
            createElement(this.reactComponent, this.serializeData(), null),
            this.el
        );

        // mimicking Mn render
        this._isRendered = true;
        this.triggerMethod('render', this);
        return this;
    }

    destroy () {
        ReactDOM.unmountComponentAtNode(this.el);
        super.destroy();
    }
}

function useBackbone(modelOrCollection) {
    const [attributes, setAttributes] = useState([]);

    useEffect(() => pullAndSetData(), []);

    const subscribe = () => {
        if (modelOrCollection instanceof Backbone.Collection) {
            modelOrCollection.on('add remove change reset sort sync', pullAndSetData);
        } else {
            modelOrCollection.on('change', pullAndSetData);
        }
    };

    const pullAndSetData = () => {
        let attributesData;

        if (modelOrCollection instanceof Backbone.Collection) {
            attributesData = [...modelOrCollection.models.map((model) => model.attributes)];
        } else {
            attributesData = {...modelOrCollection.attributes};
        }

        setAttributes(attributesData);
    };

    useEffect(() => {
        subscribe();

        return () => {
            modelOrCollection.off(null, null, this);
        };
    }, []);

    return attributes;
}

export { useBackbone };