import { __ } from '@wordpress/i18n';
import {
    useBlockProps,
    MediaPlaceholder,
    BlockControls,
    MediaReplaceFlow,
    InspectorControls
} from '@wordpress/block-editor';
import { Button, PanelBody, ToolbarGroup } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
    const { mediaId, mediaUrl } = attributes;

    const globalMediaId = window.memberpressBlocks?.thankyouWelcomeImageId ?? 0;
    const globalMediaUrl = window.memberpressBlocks?.thankyouWelcomeImageUrl ?? '';

    const effectiveMediaId = mediaId ?? globalMediaId;
    const effectiveMediaUrl = mediaUrl ?? globalMediaUrl;

    const onSelectMedia = (media) => {
        setAttributes({
            mediaId: media.id,
            mediaUrl: media.url,
        });
    };

    const onRemoveMedia = () => {
        setAttributes({
            mediaId: 0,
            mediaUrl: '',
        });
    };

    const blockProps = useBlockProps({
        className: 'mepr-welcome-image-edit'
    });

    return (
        <>
            <BlockControls group="other">
                {effectiveMediaId > 0 && (
                    <ToolbarGroup>
                        <MediaReplaceFlow
                            mediaId={mediaId}
                            mediaUrl={mediaUrl}
                            onSelect={onSelectMedia}
                            allowedTypes={['image']}
                            accept="image/*"
                        />
                    </ToolbarGroup>
                )}
            </BlockControls>
            <InspectorControls>
                <PanelBody title={__('Settings', 'memberpress')}>
                    {effectiveMediaId > 0 && (
                        <Button
                            onClick={onRemoveMedia}
                            isDestructive
                        >
                            {__('Remove Image', 'memberpress')}
                        </Button>
                    )}
                    {effectiveMediaId === 0 && (
                        <p style={{ fontSize: '13px', opacity: 0.6 }}>
                            {__('No image set. Upload an image to display one here.', 'memberpress')}
                        </p>
                    )}
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                {effectiveMediaId > 0 ? (
                    <div className="mepr-welcome-image-preview">
                        <img src={effectiveMediaUrl} alt="" style={{ maxWidth: '100%', height: 'auto' }} />
                    </div>
                ) : (
                    <MediaPlaceholder
                        icon="format-image"
                        labels={{
                            title: __('Welcome Image', 'memberpress'),
                            instructions: __('Drag an image, upload, or choose from your library to override the legacy setting.', 'memberpress'),
                        }}
                        onSelect={onSelectMedia}
                        accept="image/*"
                        allowedTypes={['image']}
                    />
                )}
            </div>
        </>
    );
}
