const { tinymce, VPTinyMCEData } = window;

if ( typeof VPTinyMCEData !== 'undefined' && VPTinyMCEData.layouts.length ) {
	const options = [
		{
			text: '',
			value: '',
		},
	];

	Object.keys( VPTinyMCEData.layouts ).forEach( ( k ) => {
		options.push( {
			text: VPTinyMCEData.layouts[ k ].title,
			value: VPTinyMCEData.layouts[ k ].id,
		} );
	} );

	tinymce.create( 'tinymce.plugins.visual_portfolio', {
		init( editor ) {
			editor.addButton( 'visual_portfolio', {
				type: 'listbox',
				title: VPTinyMCEData.plugin_name,
				icon: 'visual-portfolio',
				classes: 'visual-portfolio-btn',
				onclick() {
					if ( this.menu ) {
						this.menu.$el.find( '.mce-first' ).hide();
					}
				},
				onselect() {
					if ( this.value() ) {
						editor.insertContent(
							`[visual_portfolio id="${ this.value() }"]`
						);
					}
					this.value( '' );
				},
				values: options,
				value: '',
			} );
		},
	} );

	tinymce.PluginManager.add(
		'visual_portfolio',
		tinymce.plugins.visual_portfolio
	);
}
