import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar, PluginSidebarMoreMenuItem } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";
import { PanelBody, TextControl, TextareaControl } from "@wordpress/components";
import { withSelect, withDispatch } from "@wordpress/data";

let PluginMetaFields = (props) => {
	return (
	<>
		<PanelBody
			title={__("Media URL", "textdomain")}
			icon="format-video"
			intialOpen={ true }
		>
		<TextControl 
			value={props.text_metafield}
			label={__("meta property og:video meta", "textdomain")}
			help="postmeta:media absolute url to video"
			onChange={(value) => props.onMetaFieldChange(value)}
		/>
		</PanelBody>
	</>
	)
}

let PluginMetaFields_desc = (props) => {
	return (
	<>
		<PanelBody
			title={__("Meta Excerpt", "textdomain")}
			icon="format-aside"
			intialOpen={ true }
		>
		<TextareaControl 
			value={props.text_metafield_desc}
			label={__("meta name=description", "textdomain")}
			help="postmeta:meta-desc alternative to post excerpt from the function dw_good_excerpt"
			onChange={(value) => props.onMetaFieldChange_desc(value)}
		/>
		</PanelBody>
	</>
	)
}

PluginMetaFields = withSelect(
    (select) => {
        return {
             text_metafield: select('core/editor').getEditedPostAttribute('meta')['media']
        }
    }
)(PluginMetaFields);

PluginMetaFields_desc = withSelect(
    (select) => {
        return {
             text_metafield_desc: select('core/editor').getEditedPostAttribute('meta')['meta_desc']
        }
    }
)(PluginMetaFields_desc);

PluginMetaFields = withDispatch(
    (dispatch) => {
        return {
            onMetaFieldChange: (value) => {
                dispatch('core/editor').editPost({meta: {media: value}})
            }
        }
    }
)(PluginMetaFields);

PluginMetaFields_desc = withDispatch(
    (dispatch) => {
        return {
            onMetaFieldChange_desc: (value) => {
                dispatch('core/editor').editPost({meta: {meta_desc: value}})
            }
        }
    }
)(PluginMetaFields_desc);

registerPlugin( 'dw-sidebar', {
    icon: 'welcome-widgets-menus',
    render: () => {
        return (
            <>
                <PluginSidebarMoreMenuItem
                    target="dw-sidebar"
                >
                    {__('Meta Options', 'textdomain')}
                </PluginSidebarMoreMenuItem>
                <PluginSidebar
                    name="dw-sidebar"
                    title={__('Post Meta', 'textdomain')}
                >
                    <PluginMetaFields />
                    <PluginMetaFields_desc />
                </PluginSidebar>
            </>
        )
    }
})