import { InspectorControls, MediaUpload, MediaUploadCheck, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, Disabled, Button, ResponsiveWrapper } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

const ALLOWED_MEDIA_TYPES = ['image'];

export default function Edit({ attributes, setAttributes }) {
  const blockProps = useBlockProps({ className: 'mepr-rl-account-content' });
  const { show_welcome_image, welcome_image } = attributes;

  const onUpdateImage = (image) => {
    setAttributes({ welcome_image: image.url });
  };

  const onRemoveImage = () => {
    setAttributes({ welcome_image: '' });
  };

  const instructions = (
    <p>{__('To edit the Welcome image, you need permission to upload media.', 'memberpress')}</p>
  );

  return (
    <div {...blockProps}>
      <InspectorControls>
        <PanelBody title={__('Options', 'memberpress')} initialOpen={true}>
          <ToggleControl
            label={__('Show Welcome Image', 'memberpress')}
            checked={show_welcome_image}
            onChange={() => setAttributes({ show_welcome_image: !show_welcome_image })}
          />
          {show_welcome_image && (
            <div className="editor-post-featured-image">
              <MediaUploadCheck fallback={instructions}>
                <MediaUpload
                  title={__('Welcome image', 'memberpress')}
                  onSelect={onUpdateImage}
                  allowedTypes={ALLOWED_MEDIA_TYPES}
                  value={welcome_image}
                  render={({ open }) => (
                    <div className="editor-post-featured-image__container">
                      <Button
                        className={
                          !welcome_image
                            ? 'editor-post-featured-image__toggle'
                            : 'editor-post-featured-image__preview'
                        }
                        onClick={open}
                      >
                        {!welcome_image && __('Set Welcome image', 'memberpress')}
                        {!!welcome_image && (
                          <ResponsiveWrapper
                            naturalWidth={2000}
                            naturalHeight={2000}
                            isInline
                          >
                            <img
                              className="mepr-editor-media-preview-img"
                              src={welcome_image}
                              alt={__('Welcome image', 'memberpress')}
                            />
                          </ResponsiveWrapper>
                        )}
                      </Button>
                    </div>
                  )}
                />
              </MediaUploadCheck>
              {!!welcome_image && (
                <MediaUploadCheck>
                  <MediaUpload
                    title={__('Welcome image', 'memberpress')}
                    onSelect={onUpdateImage}
                    allowedTypes={ALLOWED_MEDIA_TYPES}
                    value={welcome_image}
                    render={({ open }) => (
                      <Button onClick={open} variant="secondary">
                        {__('Replace Welcome Image', 'memberpress')}
                      </Button>
                    )}
                  />
                </MediaUploadCheck>
              )}
              {!!welcome_image && (
                <MediaUploadCheck>
                  <Button onClick={onRemoveImage} isLink isDestructive>
                    {__('Remove Welcome Image', 'memberpress')}
                  </Button>
                </MediaUploadCheck>
              )}
            </div>
          )}
        </PanelBody>
      </InspectorControls>

      <Disabled>
        <ServerSideRender
          block="memberpress/readylaunch-account-content"
          attributes={{ show_welcome_image, welcome_image }}
        />
      </Disabled>
    </div>
  );
}
