/**
 * Edit Component for Book Synopsis Block
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl, TextareaControl, Button } 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,
        headline,
        showQuote,
        quoteText,
        quoteAuthor,
        authorImage,
        authorSubtitle,

        viewProfileLabel,
        synopsisLabel,
        detailsLabel,
        categoriesLabel,
        seriesLabel
    } = attributes;

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

    const onSelectAuthorImage = (media) => {
        setAttributes({
            authorImage: {
                id: media.id,
                url: media.url,
                alt: media.alt
            }
        });
    };

    const removeAuthorImage = () => {
        setAttributes({ authorImage: {} });
    };

    return (
        <div {...useBlockProps({
            id: anchor ? undefined : blockId
        })}>
            <InspectorControls>
                <PanelBody title={__('Content Settings', 'author-website-templates')} initialOpen={true}>
                    <TextControl
                        label={__('Headline', 'author-website-templates')}
                        value={headline}
                        onChange={(value) => setAttributes({ headline: value })}
                    />
                </PanelBody>

                <PanelBody title={__('Quote Settings', 'author-website-templates')} initialOpen={false}>
                    <ToggleControl
                        label={__('Show Quote Box', 'author-website-templates')}
                        checked={showQuote}
                        onChange={(value) => setAttributes({ showQuote: value })}
                    />
                    {showQuote && (
                        <>
                            <TextareaControl
                                label={__('Quote Text', 'author-website-templates')}
                                value={quoteText}
                                onChange={(value) => setAttributes({ quoteText: value })}
                            />
                            <TextControl
                                label={__('Quote Author', 'author-website-templates')}
                                value={quoteAuthor}
                                onChange={(value) => setAttributes({ quoteAuthor: value })}
                            />
                        </>
                    )}
                </PanelBody>

                <PanelBody title={__('Author Settings', 'author-website-templates')} initialOpen={false}>
                    <TextControl
                        label={__('Subtitle / Role', 'author-website-templates')}
                        value={authorSubtitle}
                        onChange={(value) => setAttributes({ authorSubtitle: value })}
                    />
                    <TextControl
                        label={__('View Profile Label', 'author-website-templates')}
                        value={viewProfileLabel}
                        onChange={(value) => setAttributes({ viewProfileLabel: value })}
                    />
                    <div className="awt-author-image-control" style={{ marginTop: '1rem' }}>
                        <label className="components-base-control__label">{__('Author Image', 'author-website-templates')}</label>
                        <MediaUploadCheck>
                            <MediaUpload
                                onSelect={onSelectAuthorImage}
                                allowedTypes={['image']}
                                value={authorImage ? authorImage.id : null}
                                render={({ open }) => (
                                    <>
                                        {authorImage && authorImage.url ? (
                                            <div className="awt-author-image-preview" style={{ marginBottom: '10px' }}>
                                                <img
                                                    src={authorImage.url}
                                                    alt={authorImage.alt}
                                                    style={{ maxWidth: '100%', height: 'auto', borderRadius: '4px' }}
                                                />
                                                <Button
                                                    onClick={removeAuthorImage}
                                                    isDestructive
                                                    variant="link"
                                                    style={{ marginTop: '5px' }}
                                                >
                                                    {__('Remove Image', 'author-website-templates')}
                                                </Button>
                                            </div>
                                        ) : (
                                            <Button onClick={open} variant="secondary">
                                                {__('Upload Author Image', 'author-website-templates')}
                                            </Button>
                                        )}
                                    </>
                                )}
                            />
                        </MediaUploadCheck>
                    </div>
                </PanelBody>
            </InspectorControls>

            <InspectorControls>
                <PanelBody title={__('Label Settings', 'author-website-templates')} initialOpen={false}>
                    <TextControl
                        label={__('Synopsis Label', 'author-website-templates')}
                        value={synopsisLabel}
                        onChange={(value) => setAttributes({ synopsisLabel: value })}
                    />
                    <TextControl
                        label={__('Book Details Label', 'author-website-templates')}
                        value={detailsLabel}
                        onChange={(value) => setAttributes({ detailsLabel: value })}
                    />
                    <TextControl
                        label={__('Categories Label', 'author-website-templates')}
                        value={categoriesLabel}
                        onChange={(value) => setAttributes({ categoriesLabel: value })}
                    />
                    <TextControl
                        label={__('Series Label', 'author-website-templates')}
                        value={seriesLabel}
                        onChange={(value) => setAttributes({ seriesLabel: value })}
                    />
                </PanelBody>
            </InspectorControls>

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