import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText, MediaUpload, MediaUploadCheck, MediaPlaceholder, InspectorControls } from "@wordpress/block-editor";
import { Button, PanelBody, PanelRow, SelectControl } from "@wordpress/components";

const Edit = (props) => {
    const { id, heroTitle, heroSubtitle, heroImageID, heroImageURL, heroImageAlt, heroImagePosition } = props.attributes;
    const { setAttributes } = props;
    const blockProps = useBlockProps({
        className: `storytelling-hero-block section`,
    });


    return [
        <InspectorControls key="1">
            <PanelBody title={__("Hero Settings", "purdue-home-theme-child-contenthub")}>
                <PanelRow>
                    <SelectControl
                        label="Mobile Image Position"
                        value={heroImagePosition}
                        options={[
                            { label: "Left", value: "left" },
                            { label: "Center", value: "center" },
                            { label: "Right", value: "right" },
                        ]}
                        onChange={(heroImagePosition) => setAttributes({ heroImagePosition })}
                    />
                </PanelRow>
            </PanelBody>
        </InspectorControls>,
        <div {...blockProps} key="2">
            <MediaUploadCheck>
                <MediaUpload
                    onSelect={(media) => {
                        setAttributes({
                            heroImageID: media.id,
                            heroImageURL: media.url,
                            heroImageAlt: media.alt,
                        });
                    }}
                    allowedTypes={['image']}
                    value={heroImageID}
                    render={({ open }) => (
                        <>
                            {!heroImageURL ? (
                                <MediaPlaceholder
                                    onSelect={(media) => {
                                        setAttributes({
                                            heroImageID: media.id,
                                            heroImageURL: media.url,
                                            heroImageAlt: media.alt,
                                        });
                                    }}
                                    allowedTypes={['image']}
                                    multiple={false}
                                >
                                </MediaPlaceholder>
                            ) : (
                                <div className="block-image-wrapper">
                                    <img src={heroImageURL} alt={heroImageAlt} />


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

                                        <Button
                                            isDestructive
                                            onClick={() =>
                                                setAttributes({
                                                    heroImageID: null,
                                                    heroImageURL: '',
                                                    heroImageAlt: '',
                                                })
                                            }
                                        >
                                            {__('Remove', 'text-domain')}
                                        </Button>
                                    </div>
                                </div>
                            )}
                        </>
                    )}
                />
            </MediaUploadCheck>



            <RichText
                tagName="h1"
                className="hero-title"
                value={heroTitle}
                placeholder="Title"
                onChange={(heroTitle) => setAttributes({ heroTitle })}
            />


            <RichText
                tagName="p"
                className="hero-subtitle"
                value={heroSubtitle}
                placeholder="Add subtitle…"
                onChange={(heroSubtitle) => setAttributes({ heroSubtitle })}
            />

        </div>
    ];
};

export default Edit;