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, question, answer, background } = props.attributes;
    const { setAttributes } = props;
    const blockProps = useBlockProps({
        className: `storytelling-content-block section 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: "grey-lighter-alt" },
                            { label: "Black", value: "black" },
                            { label: "Grey", value: "grey-lighter" },
                            { label: "Rush Gold", value: "rush-gold" },
                            { label: "Steel Gray", value: "dark-gray" },
                            { label: "Boilermaker Gold", value: "gold" },

                        ]}
                        onChange={(background) => setAttributes({ background })}
                    />
                </PanelRow>
            </PanelBody>
        </InspectorControls>,
        <div {...blockProps} key="2">

            <div className="storytelling-qa-block__qa"><p><span>Q+A</span></p></div>
           
            <RichText
                tagName="p"
                className="qa-question"
                value={question}
                placeholder="Add question…"
                onChange={(question) => setAttributes({ question })}
                allowedFormats={['core/bold', 'core/italic']}
            />

        
            <RichText
                tagName="p"
                className="qa-anwswer"
                value={answer}
                placeholder="Add answer…"
                onChange={(answer) => setAttributes({ answer })}
            />
            
        </div>
    ];
};

export default Edit;