import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
import {
    PanelBody, 
    TextControl, 
    ToolbarGroup,
    ToolbarDropdownMenu,
 } from '@wordpress/components';

import {save_null} from '../common';

registerBlockType( 'faqtastic/context', {
    edit: ({ attributes, context, setAttributes }) => {
        const blockProps = useBlockProps();
        const postId = attributes.postId || context.postId;
        const {
            title,
            headingLevel,
        } = attributes;

        const TitleTag = headingLevel;

        return (
            <div {...blockProps} data-postid={postId}>
                <InspectorControls>
                    <PanelBody title={__('Settings')} initialOpen={true}>
                        <TextControl
                            label={__('Title')}
                            value={title}
                            onChange={(value) => setAttributes({ title: value })}
                        />
                    </PanelBody>
                </InspectorControls>
                <BlockControls>
                    <ToolbarGroup>
                        <ToolbarDropdownMenu
                            icon="heading"
                            label={__('Heading')}
                            controls={[
                                {
                                    title: 'H1',
                                    onClick: () => setAttributes({ headingLevel: 'h1' }),
                                },
                                {
                                    title: 'H2',
                                    onClick: () => setAttributes({ headingLevel: 'h2' }),
                                },
                                {
                                    title: 'H3',
                                    onClick: () => setAttributes({ headingLevel: 'h3' }),
                                },
                                {
                                    title: 'H4',
                                    onClick: () => setAttributes({ headingLevel: 'h4' }),
                                },
                                {
                                    title: 'H5',
                                    onClick: () => setAttributes({ headingLevel: 'h5' }),
                                },
                                {
                                    title: 'H6',
                                    onClick: () => setAttributes({ headingLevel: 'h6' }),
                                },
                            ]}
                        />
                    </ToolbarGroup>
                </BlockControls>
                {<TitleTag>{title}</TitleTag>}
                <div className="faq-context-block-editor" >
                    {__('The context will be displayed on the front end.', 'faqtastic')}
                </div>
            </div>
        );
    },
    save: save_null,
});