const { __ } = wp.i18n; // Import __() from wp.i18n

wp.blocks.registerBlockType('my/media-box', {
    title: 'MyPlaylist',
    description: 'Block inserts custom player',
    icon: 'playlist-video',
    category: 'common',
    supports: {
        multiple: false,
        html: true,
        reusable: false,
    },
    attributes: {
        multiple: false,
        html: true,
        contentHTML: {
            type: 'string',
            source: 'html',
            selector: 'div',
        },
        content: {
            type: 'string',
            source: 'meta',
            meta: 'content',
        },
        thumbnail: {
            type: 'string',
            source: 'meta',
            meta: 'thumbnail'
        },
        playlistId: {
            type: 'number',
            source: 'meta',
            meta: 'playlistId'
        }
    },

    edit: function (props) {
        const { attributes: { contentHTML, thumbnail, playlistId }, setAttributes } = props;
        const postTitle = wp.data.select('core/editor').getCurrentPostAttribute('title');
        const msgEventListener = (msg) => {
            if (msg && msg.data && msg.data.embed) {
                doInsert({
                    embedCode: msg.data.embed.embedCode,
                    thumbnail: msg.data.thumbnail,
                    playlistId: msg.data.playlistId
                })
            }
        };

        function updateContent(data) {
            setAttributes({
                contentHTML: data.embedCode,
                thumbnail: data.thumbnail,
                playlistId: data.playlistId
            });

        }

        function closeModal() {
            setAttributes({
                isModalOpen: false,
            });
        }

        function openModal() {
            setAttributes({
                isModalOpen: true,
            });
        }

        function doInsert(data) {
            setAttributes({
                isModalOpen: false,
            });

            window.removeEventListener("message", msgEventListener, false);

            updateContent(data);
        }

        if (postTitle === 'Auto Draft' || postTitle === '') return wp.element.createElement(
            "div",
            null,
            wp.element.createElement("div", {
                className: "components-placeholder"
            },
            __('Save post with title first', "my-media")
            )
        );

        return wp.element.createElement(
            wp.element.Fragment,
            null,
            wp.element.createElement(
                'div',
                {
                    className: "components-placeholder",
                },

                thumbnail && thumbnail.length
                ?
                wp.element.createElement('img', {
                    src: thumbnail,
                })
                :
                wp.element.createElement(wp.components.Icon, {
                    icon: 'format-video',
                    size: 320,
                },
                    ''
                ),
                wp.element.createElement(wp.components.IconButton, {
                    icon: "playlist-video",
                    onClick: openModal,
                    isLarge: !0,
                },
                    contentHTML ? __('Edit', 'my-media') : __("My Playlist", "my-media")
                ),

                props.attributes.isModalOpen
                ?
                window.removeEventListener("message", msgEventListener)
                ||
                window.addEventListener("message", msgEventListener, false)
                ||
                React.createElement(wp.components.Modal, {
                    shouldCloseOnEsc: true,
                    isDefault: true,
                    shouldCloseOnClickOutside: false,
                    onRequestClose: closeModal,
                    title: 'Insert My Playlist',
                },
                React.createElement("iframe", {
                    src: `URL_TO_EMBEDCODE`,
                    className: 'my-media-iframe'
                }),
                )
                : null,

            ),
        );
    },
    save: function ({attributes: { contentHTML }}) {
        return wp.element.createElement(wp.element.RawHTML, null, contentHTML);
    }
});