/**
 * WordPress components that create the necessary UI elements for the block
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-components/
 */
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, Disabled } from "@wordpress/components";
import { PanelColorSettings } from "@wordpress/block-editor";

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */
import { useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';

const { __ } = wp.i18n;

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 *
 * @param {Object}   props               Properties passed to the function.
 * @param {Object}   props.attributes    Available block attributes.
 * @param {Function} props.setAttributes Function that updates individual attributes.
 *
 * @return {WPElement} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
  const blockProps = useBlockProps();
  const { dropdownBackgroundColor, dropdownTextColor } = attributes;

  return (
    <div {...blockProps}>

      <InspectorControls group="styles">
        {/* <PanelBody title={__("Dropdown Settings", "memberpress")}> */}
          <PanelColorSettings
            title={__("Dropdown Colors", "memberpress")}
            colorSettings={[
              {
                value: dropdownBackgroundColor,
                onChange: (color) => setAttributes({ dropdownBackgroundColor: color }),
                label: __("Dropdown Background", "memberpress"),
              },
              {
                value: dropdownTextColor,
                onChange: (color) => setAttributes({ dropdownTextColor: color }),
                label: __("Dropdown Text Color", "memberpress"),
              },
            ]}
          />
        {/* </PanelBody> */}
      </InspectorControls>

      <Disabled>
        <ServerSideRender
          block="memberpress/pro-profile-menu"
          attributes={attributes}
        />
      </Disabled>
    </div>
  );
}

