/**
 * Edit Component for Book Page Reviews Block
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, TextareaControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { useEffect } from '@wordpress/element';

export default function Edit({ attributes, setAttributes, clientId }) {
    const { blockId, anchor, sectionTitle, formTitle, submitBtnText } = attributes;

    useEffect(() => {
        if (!blockId) {
            setAttributes({ blockId: `awt-book-reviews-${clientId}` });
        }
    }, [blockId, clientId]);

    return (
        <div {...useBlockProps({
            id: anchor ? undefined : blockId
        })}>
            <InspectorControls>
                <PanelBody title={__('Content Settings', 'author-website-templates')} initialOpen={true}>
                    <TextControl
                        label={__('Section Title', 'author-website-templates')}
                        value={sectionTitle}
                        onChange={(value) => setAttributes({ sectionTitle: value })}
                    />
                    <TextControl
                        label={__('Form Title', 'author-website-templates')}
                        value={formTitle}
                        onChange={(value) => setAttributes({ formTitle: value })}
                    />
                    <TextControl
                        label={__('Submit Button Text', 'author-website-templates')}
                        value={submitBtnText}
                        onChange={(value) => setAttributes({ submitBtnText: value })}
                    />
                </PanelBody>

                <PanelBody title={__('Sorting & Labels', 'author-website-templates')} initialOpen={false}>
                    <h3>{__('Sorting Options', 'author-website-templates')}</h3>
                    <TextControl
                        label={__('Most Recent Label', 'author-website-templates')}
                        value={attributes.sortLabelMostRecent}
                        onChange={(value) => setAttributes({ sortLabelMostRecent: value })}
                    />
                    <TextControl
                        label={__('Highest Rated Label', 'author-website-templates')}
                        value={attributes.sortLabelHighest}
                        onChange={(value) => setAttributes({ sortLabelHighest: value })}
                    />
                    <TextControl
                        label={__('Lowest Rated Label', 'author-website-templates')}
                        value={attributes.sortLabelLowest}
                        onChange={(value) => setAttributes({ sortLabelLowest: value })}
                    />

                    <h3>{__('Stats Section', 'author-website-templates')}</h3>
                    <TextControl
                        label={__('Based on Text', 'author-website-templates')}
                        value={attributes.textBasedOn}
                        onChange={(value) => setAttributes({ textBasedOn: value })}
                    />
                    <TextControl
                        label={__('Reviews Suffix', 'author-website-templates')}
                        value={attributes.textReviewsSuffix}
                        onChange={(value) => setAttributes({ textReviewsSuffix: value })}
                    />
                    <TextControl
                        label={__('Star Text', 'author-website-templates')}
                        value={attributes.textStar}
                        onChange={(value) => setAttributes({ textStar: value })}
                    />

                    <h3>{__('CTA Section', 'author-website-templates')}</h3>
                    <TextControl
                        label={__('CTA Heading', 'author-website-templates')}
                        value={attributes.ctaHeading}
                        onChange={(value) => setAttributes({ ctaHeading: value })}
                    />
                    <TextControl
                        label={__('CTA Description', 'author-website-templates')}
                        value={attributes.ctaDescription}
                        onChange={(value) => setAttributes({ ctaDescription: value })}
                    />
                    <TextControl
                        label={__('CTA Button Text', 'author-website-templates')}
                        value={attributes.ctaButtonText}
                        onChange={(value) => setAttributes({ ctaButtonText: value })}
                    />

                    <h3>{__('Form Labels', 'author-website-templates')}</h3>
                    <TextControl
                        label={__('Name Label', 'author-website-templates')}
                        value={attributes.labelName}
                        onChange={(value) => setAttributes({ labelName: value })}
                    />
                    <TextControl
                        label={__('Email Label', 'author-website-templates')}
                        value={attributes.labelEmail}
                        onChange={(value) => setAttributes({ labelEmail: value })}
                    />
                    <TextControl
                        label={__('Rating Label', 'author-website-templates')}
                        value={attributes.labelRating}
                        onChange={(value) => setAttributes({ labelRating: value })}
                    />
                    <TextControl
                        label={__('Review Title Label', 'author-website-templates')}
                        value={attributes.labelReviewTitle}
                        onChange={(value) => setAttributes({ labelReviewTitle: value })}
                    />
                    <TextControl
                        label={__('Review Content Label', 'author-website-templates')}
                        value={attributes.labelReviewContent}
                        onChange={(value) => setAttributes({ labelReviewContent: value })}
                    />

                    <h3>{__('Messages', 'author-website-templates')}</h3>
                    <TextControl
                        label={__('No Reviews Message', 'author-website-templates')}
                        value={attributes.msgNoReviews}
                        onChange={(value) => setAttributes({ msgNoReviews: value })}
                    />
                </PanelBody>
            </InspectorControls>

            <ServerSideRender
                block="awt/author-pro-book-page-reviews"
                attributes={attributes}
            />
        </div>
    );
}
