import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import metadata from './block.json';

export default function Edit(props) {
    const { attributes, setAttributes } = props;
    const {
        showBreadcrumb, showImage, showAuthorBottom, showNav, showComments, showRelated,
        labelBack, labelBy, labelComments, labelLeaveReply, labelRelated,
        titleColor, accentColor, bgColor
    } = attributes;

    return (
        <div {...useBlockProps()}>
            <InspectorControls>
                <PanelBody title={__('Display Settings', 'author-website-templates')}>
                    <ToggleControl
                        label={__('Show Breadcrumb', 'author-website-templates')}
                        checked={showBreadcrumb}
                        onChange={(value) => setAttributes({ showBreadcrumb: value })}
                    />
                    <ToggleControl
                        label={__('Show Featured Image', 'author-website-templates')}
                        checked={showImage}
                        onChange={(value) => setAttributes({ showImage: value })}
                    />
                    <ToggleControl
                        label={__('Show Author Box (Bottom)', 'author-website-templates')}
                        checked={showAuthorBottom}
                        onChange={(value) => setAttributes({ showAuthorBottom: value })}
                    />
                    <ToggleControl
                        label={__('Show Navigation', 'author-website-templates')}
                        checked={showNav}
                        onChange={(value) => setAttributes({ showNav: value })}
                    />
                    <ToggleControl
                        label={__('Show Comments', 'author-website-templates')}
                        checked={showComments}
                        onChange={(value) => setAttributes({ showComments: value })}
                    />
                    <ToggleControl
                        label={__('Show Related Posts', 'author-website-templates')}
                        checked={showRelated}
                        onChange={(value) => setAttributes({ showRelated: value })}
                    />
                </PanelBody>

                <PanelBody title={__('Labels', 'author-website-templates')}>
                    <TextControl
                        label={__('Back Link Label', 'author-website-templates')}
                        value={labelBack}
                        onChange={(value) => setAttributes({ labelBack: value })}
                    />
                    <TextControl
                        label={__('By Label', 'author-website-templates')}
                        value={labelBy}
                        onChange={(value) => setAttributes({ labelBy: value })}
                    />
                    <TextControl
                        label={__('Comments Header', 'author-website-templates')}
                        value={labelComments}
                        onChange={(value) => setAttributes({ labelComments: value })}
                    />
                    <TextControl
                        label={__('Leave Reply Header', 'author-website-templates')}
                        value={labelLeaveReply}
                        onChange={(value) => setAttributes({ labelLeaveReply: value })}
                    />
                    <TextControl
                        label={__('Related Posts Header', 'author-website-templates')}
                        value={labelRelated}
                        onChange={(value) => setAttributes({ labelRelated: value })}
                    />
                </PanelBody>

                <PanelColorSettings
                    title={__('Colors', 'author-website-templates')}
                    initialOpen={false}
                    colorSettings={[
                        {
                            value: titleColor,
                            onChange: (value) => setAttributes({ titleColor: value }),
                            label: __('Title Color', 'author-website-templates'),
                        },
                        {
                            value: accentColor,
                            onChange: (value) => setAttributes({ accentColor: value }),
                            label: __('Accent Color', 'author-website-templates'),
                        },
                        {
                            value: bgColor,
                            onChange: (value) => setAttributes({ bgColor: value }),
                            label: __('Background Color', 'author-website-templates'),
                        },
                    ]}
                />
            </InspectorControls>

            <ServerSideRender
                block={metadata.name}
                attributes={attributes}
            />
        </div>
    );
}
