import videoIcon from "raw-loader!../../icons/youtube-brands.svg";

export const VideoBlock = (bm, label) => {
    bm.add('bs-video', {
        label: `
            ${videoIcon}
            <div>${label}</div>
        `,
        category: 'Media',
        content: {
            type: 'bs-video'
        }
    });
};

export default (domComponent) => {
    const videoType = domComponent.getType('video');
    const model = videoType.model;
    const view = videoType.view;
    const type = 'bs-embed-responsive';

    domComponent.addType(type, {
        model: model.extend({
            defaults: Object.assign({}, model.prototype.defaults, {
                'custom-name': 'Video',
                resizable: false,
                droppable: false,
                draggable: false,
                copyable: false,
                provider: 'so',
                classes: ['embed-responsive-item'],
            })
        }, {
            isComponent: function(el) {
                if(el && el.className === 'embed-responsive-item') {
                    var result = {
                        provider: 'so',
                        type: type
                    };
                    var isYtProv = /youtube\.com\/embed/.test(el.src);
                    var isYtncProv = /youtube-nocookie\.com\/embed/.test(el.src);
                    var isViProv = /player\.vimeo\.com\/video/.test(el.src);
                    var isExtProv = isYtProv || isYtncProv || isViProv;
                    if (el.tagName == 'VIDEO' || (el.tagName == 'IFRAME' && isExtProv)) {
                      if (el.src) result.src = el.src;
                      if (isExtProv) {
                        if (isYtProv) result.provider = 'yt';
                        else if (isYtncProv) result.provider = 'ytnc';
                        else if (isViProv) result.provider = 'vi';
                      }
                    }
                    return result;

                }
            }
        }),
        view: view
    });
}