import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
const { InspectorControls, useBlockProps } = wp.blockEditor;
import { applyFilters } from '@wordpress/hooks';
import {
    PanelBody, 
    SelectControl,
    TextControl, 
    ToggleControl,
 } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import {save_null} from '../common';
import DeselectControl from '../DeselectControl';
import './current.scss';

const edit = (props) => {
    const { className, setAttributes, attributes } = props;
    const { 
        enableLink,
        defaultLabel,
        colorScheme,
     } = attributes;
    const blockProps = useBlockProps();

    const isReactElement = (element) => {
        if(element && element.$$typeof && element.$$typeof.toString() === 'Symbol(react.element)'){
            return element;
        }
        return null;
    }
    
    return (
        <div className={className} {...blockProps}>
            <InspectorControls>
                <PanelBody title={__("Display")} initialOpen={true}>
                    {isReactElement(applyFilters('editor.current.inspector.controls.display.before', props))}
                    <ToggleControl
                        label={__("Enable Link", "personalizer")}
                        checked={enableLink}
                        onChange={(value) => setAttributes({ enableLink: value })}
                        />
                    <TextControl
                        label={__("Label")}
                        value={defaultLabel}
                        onChange={(value) => setAttributes({ defaultLabel: value })}
                        />
                    <SelectControl
                        label={__("Color")}
                        value={colorScheme}
                        options={[
                            { label: __("None"), value: "none" },
                            { label: __("Primary"), value: "primary" },
                            { label: __("Secondary"), value: "secondary" },
                        ]}
                        onChange={(value) => setAttributes({ colorScheme: value })}
                    />
                    {isReactElement(applyFilters('editor.current.inspector.controls.display.after', props))}
                </PanelBody>
                <DeselectControl {...props} />
            </InspectorControls>
            <ServerSideRender
                block="personalizer/current" 
                attributes={attributes}
            />
        </div>
    );
};

registerBlockType( 'personalizer/current', {
    edit: edit,
    save: save_null,
} );