import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';

import { PanelRow, Button } from '@wordpress/components';

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default function MediaPicker({ mediaProps, mediaCallback }) {
  // toggles
  const [stateMedia, setStateMedia] = useState({
    id: null,
    url: '',
    sizes: [],
    alt: '',
    type: '',
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (mediaProps) {
      setStateMedia({ ...mediaProps });
    }
  }, [mediaProps]);

  // image handlers
  const removeMedia = () => {
    const mediaObj = {
      mediaId: 0,
      mediaUrl: '',
    };
    mediaCallback({ ...mediaObj });
  };
  // onselect media
  const onSelectMedia = (media) => {
    // add responsive sizes
    const responsive = ['large', 'medium', 'thumbnail'];
    const sizes = [];
    for (const key in media.sizes) {
      if (responsive.includes(key)) {
        sizes[key] = media.sizes[key].url;
      }
    }
    const mediaObj = {
      id: media.id,
      url: media.url,
      sizes: sizes,
      alt: media.alt,
      type: media.type,
      width: media.width,
      height: media.height,
    };
    mediaCallback({ ...mediaObj });
  };

  return (
    <>
      <PanelRow>
        {stateMedia.id !== null && (
          <MediaUploadCheck>
            <MediaUpload
              onSelect={onSelectMedia}
              value={stateMedia.id}
              allowedTypes={['image', 'video']}
              render={({ open }) => (
                <Button
                  className={
                    stateMedia.id == 0
                      ? 'editor-post-featured-image__toggle'
                      : 'editor-post-featured-image__preview'
                  }
                  onClick={open}
                >
                  {stateMedia.id == 0 &&
                    __('Choose an image or video', 'blockbite')}
                  {stateMedia.id && stateMedia.type !== 'video' ? (
                    <div className="blockbite--editor-visual-image">
                      <img src={stateMedia.url} />
                    </div>
                  ) : (
                    'Video'
                  )}
                </Button>
              )}
            />
          </MediaUploadCheck>
        )}
        {stateMedia.id != 0 && (
          <MediaUploadCheck>
            <MediaUpload
              title={__('Replace media', 'blockbite')}
              value={stateMedia.id}
              onSelect={onSelectMedia}
              allowedTypes={['image']}
              render={({ open }) => (
                <Button onClick={open}>
                  {__('Replace media', 'blockbite')}
                </Button>
              )}
            />
          </MediaUploadCheck>
        )}
        {stateMedia.id != 0 && (
          <MediaUploadCheck>
            <Button onClick={() => removeMedia()} isDestructive>
              {__('Remove media', 'blockbite')}
            </Button>
          </MediaUploadCheck>
        )}
      </PanelRow>
    </>
  );
}