import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks, useInnerBlocksProps, MediaUpload, MediaUploadCheck, MediaPlaceholder } from "@wordpress/block-editor";
import { Button } from "@wordpress/components";

const Edit = (props) => {
    const { id, featuredImageID, featuredImageURL, featuredImageAlt } = props.attributes;
    const { setAttributes } = props;
    const blockProps = useBlockProps({
        className: `storytelling-featured-block section`,
    });

    const ALLOWED_BLOCKS = ['purdue/storytelling-content-block', 'purdue/storytelling-qa-block']

    const hasChildBlocks = props.clientId && wp.data.select('core/block-editor').getBlock(props.clientId).innerBlocks;



    return [
        <div {...blockProps} className="wp-block-purdue-storytelling-featured storytelling-featured" key="1">
            <div className="container">
                <div className="section">
                    <MediaUploadCheck>
                        <MediaUpload
                            onSelect={(media) => {
                                setAttributes({
                                    featuredImageID: media.id,
                                    featuredImageURL: media.url,
                                    featuredImageAlt: media.alt,
                                });
                            }}
                            allowedTypes={['image']}
                            value={featuredImageID}
                            render={({ open }) => (
                                <>
                                    {!featuredImageURL ? (
                                        <MediaPlaceholder
                                            onSelect={(media) => {
                                                setAttributes({
                                                    featuredImageID: media.id,
                                                    featuredImageURL: media.url,
                                                    featuredImageAlt: media.alt,
                                                });
                                            }}
                                            allowedTypes={['image']}
                                            multiple={false}
                                        >
                                        </MediaPlaceholder>
                                    ) : (
                                        <div className="block-image-wrapper">
                                            <img src={featuredImageURL} alt={featuredImageAlt} />


                                            <div className="block-image-controls">
                                                <Button onClick={open} variant="secondary">
                                                    {__('Replace', 'text-domain')}
                                                </Button>

                                                <Button
                                                    isDestructive
                                                    onClick={() =>
                                                        setAttributes({
                                                            featuredImageID: null,
                                                            featuredImageURL: '',
                                                            featuredImageAlt: '',
                                                        })
                                                    }
                                                >
                                                    {__('Remove', 'text-domain')}
                                                </Button>
                                            </div>
                                        </div>
                                    )}
                                </>
                            )}
                        />
                    </MediaUploadCheck>

                    <div className="columns featured-content-wrapper is-mobile">
                        <div class="column is-6 is-offset-3">

                            <InnerBlocks
                                templateLock={false}
                                allowedBlocks={ALLOWED_BLOCKS}
                                renderAppender={
                                    hasChildBlocks ?
                                        undefined :
                                        () => <InnerBlocks.DefaultBlockAppender />
                                }
                            />

                        </div>

                    </div>
                </div>
            </div>
        </div>
    ];
};

export default Edit;