import {registerBlockType} from "@wordpress/blocks";
import {__} from "@wordpress/i18n";
import {BlockControls, useBlockProps} from "@wordpress/block-editor";
import ServerSideRender from "@wordpress/server-side-render";
import {InspectorControls} from "@wordpress/editor";
import {Disabled, PanelBody, Placeholder, ToggleControl} from "@wordpress/components";
import icons from "../../helpers/icons";
import CrumbsAlign from "../../controls/alignment";
import CrumbsDisplay from "../../controls/display";
import CrumbsAdvanced from "../../controls/advanced";
import metadata from "./block.json";

registerBlockType(metadata, {
    icon: icons.multi,
    edit: ({attributes, setAttributes, context: {postId}, clientId}) => {
        const {block_id} = attributes;
        if (!block_id) {
            setAttributes({block_id: clientId.substring(0, 8)});
        }

        return (
            <div {...useBlockProps()}>
                <Disabled>
                    {postId && (
                        <ServerSideRender
                            block='breadcrumbspress/multi'
                            attributes={attributes}
                        />)}
                    {!postId && (
                        <Placeholder
                            icon={icons.share}
                            label={__('Context Missing', 'breadcrumbspress')}
                        >
                            {__('This block can only work inside the post or page.', 'breadcrumbspress')}
                        </Placeholder>
                    )}
                </Disabled>
                <BlockControls>
                    <CrumbsAlign
                        attributes={attributes}
                        setAttributes={setAttributes}
                    ></CrumbsAlign>
                </BlockControls>
                <InspectorControls key="settings">
                    <PanelBody title={__('Paths to show', 'breadcrumbspress')}>
                        <ToggleControl
                            label={__('Basic', 'breadcrumbspress')}
                            checked={attributes.show_basic}
                            onChange={(value) => setAttributes({show_basic: value})}
                        />
                        <ToggleControl
                            label={__('Posts', 'breadcrumbspress')}
                            checked={attributes.show_posts}
                            onChange={(value) => setAttributes({show_posts: value})}
                        />
                        <ToggleControl
                            label={__('Archive', 'breadcrumbspress')}
                            checked={attributes.show_archive}
                            onChange={(value) => setAttributes({show_archive: value})}
                        />
                        <ToggleControl
                            label={__('Author', 'breadcrumbspress')}
                            checked={attributes.show_author}
                            onChange={(value) => setAttributes({show_author: value})}
                        />
                        <ToggleControl
                            label={__('Dates', 'breadcrumbspress')}
                            checked={attributes.show_date}
                            onChange={(value) => setAttributes({show_date: value})}
                        />
                        <ToggleControl
                            label={__('Terms', 'breadcrumbspress')}
                            checked={attributes.show_terms}
                            onChange={(value) => setAttributes({show_terms: value})}
                        />
                    </PanelBody>
                    <CrumbsDisplay
                        attributes={attributes}
                        setAttributes={setAttributes}
                    ></CrumbsDisplay>
                    <CrumbsAdvanced
                        attributes={attributes}
                        setAttributes={setAttributes}
                    ></CrumbsAdvanced>
                </InspectorControls>
            </div>
        );
    },
    save: () => {
        return null
    }
});
