(function (wp) {
  const { registerBlockType } = wp.blocks;
  const {
    InspectorControls,
    PanelColorSettings,
    MediaUpload,
    MediaUploadCheck,
    useBlockProps,
  } = wp.blockEditor;
  const { PanelBody, TextControl, TextareaControl, Button, ToggleControl } = wp.components;

  registerBlockType('fjord/faq-hero', {
    edit: ({ attributes, setAttributes }) => {
      const blockProps = useBlockProps({ className: 'fjord-faq-hero-block' });
      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          wp.element.createElement(
            PanelBody,
            { title: 'Content', initialOpen: true },
            wp.element.createElement(TextControl, {
              label: 'Title',
              value: attributes.title,
              onChange: (value) => setAttributes({ title: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: 'Intro text',
              value: attributes.introText,
              onChange: (value) => setAttributes({ introText: value }),
            })
          ),
          wp.element.createElement(
            PanelBody,
            { title: 'Image', initialOpen: false },
            wp.element.createElement(
              MediaUploadCheck,
              null,
              wp.element.createElement(MediaUpload, {
                onSelect: (media) => setAttributes({ imageUrl: media?.url || '' }),
                allowedTypes: ['image'],
                value: attributes.imageUrl,
                render: ({ open }) =>
                  wp.element.createElement(Button, { onClick: open, variant: 'secondary' },
                    attributes.imageUrl ? 'Change image' : 'Select image'
                  ),
              })
            ),
            wp.element.createElement(TextControl, {
              label: 'Image alt text',
              value: attributes.imageAlt,
              onChange: (value) => setAttributes({ imageAlt: value }),
            }),
          ),
          wp.element.createElement(
            PanelBody,
            { title: 'Colors', initialOpen: false },
            wp.element.createElement(ToggleControl, {
              label: 'Use custom colors',
              checked: attributes.useCustomColors,
              onChange: (value) => setAttributes({ useCustomColors: value }),
            }),
            attributes.useCustomColors
              ? wp.element.createElement(PanelColorSettings, {
                  title: 'Palette',
                  colorSettings: [
                    {
                      label: 'Card background',
                      value: attributes.cardBackground,
                      onChange: (value) => setAttributes({ cardBackground: value || '' }),
                    },
                    {
                      label: 'Text color',
                      value: attributes.textColor,
                      onChange: (value) => setAttributes({ textColor: value || '' }),
                    },
                  ],
                })
              : null
          )
        ),
        wp.element.createElement(
          'div',
          { ...blockProps, style: { padding: '24px', border: '1px dashed #cfcfcf', background: '#fff', minHeight: '80px' } },
          wp.element.createElement('p', null, 'FAQ hero renders on the front-end – configure it from the block sidebar.')
        )
      );
    },
    save: () => null,
  });
})(window.wp);
