const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, TextControl, ToggleControl } = wp.components;
const { __ } = wp.i18n;

registerBlockType('launchmind/blog-post', {
    title: __('Launchmind Single Post', 'launchmind-blog'),
    icon: 'media-text',
    category: 'widgets',
    description: __('Display a single Launchmind post by slug.', 'launchmind-blog'),
    supports: { html: false },
    attributes: {
        slug: { type: 'string', default: '' },
        showTitle: { type: 'boolean', default: true },
        showDate: { type: 'boolean', default: true },
        showAuthor: { type: 'boolean', default: true },
        showImage: { type: 'boolean', default: true },
        showTags: { type: 'boolean', default: true },
    },
    edit: ({ attributes, setAttributes }) => {
        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Post', 'launchmind-blog')}>
                        <TextControl
                            label={__('Slug', 'launchmind-blog')}
                            help={__('Use the Launchmind post slug', 'launchmind-blog')}
                            value={attributes.slug}
                            onChange={(val) => setAttributes({ slug: val })}
                        />
                    </PanelBody>
                    <PanelBody title={__('Display', 'launchmind-blog')} initialOpen={false}>
                        <ToggleControl label={__('Show title', 'launchmind-blog')} checked={attributes.showTitle} onChange={(v) => setAttributes({ showTitle: v })} />
                        <ToggleControl label={__('Show date', 'launchmind-blog')} checked={attributes.showDate} onChange={(v) => setAttributes({ showDate: v })} />
                        <ToggleControl label={__('Show author', 'launchmind-blog')} checked={attributes.showAuthor} onChange={(v) => setAttributes({ showAuthor: v })} />
                        <ToggleControl label={__('Show image', 'launchmind-blog')} checked={attributes.showImage} onChange={(v) => setAttributes({ showImage: v })} />
                        <ToggleControl label={__('Show tags', 'launchmind-blog')} checked={attributes.showTags} onChange={(v) => setAttributes({ showTags: v })} />
                    </PanelBody>
                </InspectorControls>
                <div className="lm-post-block__placeholder">
                    <strong>{attributes.slug || __('Set a post slug to preview content', 'launchmind-blog')}</strong>
                </div>
            </>
        );
    },
    save: () => null,
});
