import { __ } from "@wordpress/i18n";
import { useBlockProps, useInnerBlocksProps, InnerBlocks, RichText, InspectorControls } from "@wordpress/block-editor";
import { PanelBody, PanelRow, SelectControl } from "@wordpress/components";

const Edit = (props) => {
    const { id, factTitle, factText, factTitle2, factText2, factTitle3, factText3, background } = props.attributes;
    const { setAttributes, isSelected } = props;
    const blockProps = useBlockProps({
        className: `storytelling-content-block has-background-${background}`,
    });


    const innerBlocksProps = useInnerBlocksProps(
        { className: 'storytelling-content-block__inner' },
        {
            templateLock: false,
        }
    );

    return [
        <InspectorControls key="1">
            <PanelBody title={__("Background Settings", "purdue-home-theme-child-contenthub")}>
                <PanelRow>
                    <SelectControl
                        label="Choose the background of this slide."
                        value={background}
                        options={[
                            { label: "White", value: "white" },
                            { label: "Black", value: "black" },
                            { label: "Gray", value: "gray" },
                        ]}
                        onChange={(background) => setAttributes({ background })}
                    />
                </PanelRow>
            </PanelBody>
        </InspectorControls>,
        <div {...blockProps} key="2">

            {/* Keep empty div for rich text selection */}

            <div className="storytelling-content-block__decorative-bar"></div>
           
            <RichText
                tagName="p"
                value={factTitle}
                placeholder="Add fact title…"
                onChange={(factTitle) => setAttributes({ factTitle })}
                allowedFormats={['core/bold', 'core/italic']}
            />

        
            <RichText
                tagName="p"
                value={factText}
                placeholder="Add fact text…"
                onChange={(factText) => setAttributes({ factText })}
            />

            <RichText
                tagName="p"
                value={factTitle2}
                placeholder="Add fact title 2…"
                onChange={(factTitle2) => setAttributes({ factTitle2 })}
                allowedFormats={['core/bold', 'core/italic']}
            />

            <RichText
                tagName="p"
                value={factText2}
                placeholder="Add fact text 2…"
                onChange={(factText2) => setAttributes({ factText2 })}
            />

            <RichText
                tagName="p"
                value={factTitle3}
                placeholder="Add fact title 3…"
                onChange={(factTitle3) => setAttributes({ factTitle3 })}
                allowedFormats={['core/bold', 'core/italic']}
            />

            <RichText
                tagName="p"
                value={factText3}
                placeholder="Add fact text 3…"
                onChange={(factText3) => setAttributes({ factText3 })}
            />
        </div>
    ];
};

export default Edit;