import { ImageProvider } from '@siteone/react-img-microservice'
import { Element, styled } from '@siteone/system-core'
import React, { useEffect, useState } from 'react'
import MediaLibrary from '../MediaLibrarySearch/MediaLibrarySearchContainer'
import Add from './Add'
import defaultConfig from './config'
import Thumb from './Thumb'

const Overlay = styled(Element)`
  opacity: ${props => (props.open ? 1 : 0)};
  overflow: hidden;
  width: ${props => (props.open ? '100%' : 0)};
  height: ${props => (props.open ? '100%' : 0)};
  transition: opacity 0.3s;
  padding: ${props => (props.open ? '32px' : 0)};
  background: rgba(0,0,0, 0.5);
  position: fixed;
  display: flex;
  z-index: 2;
  top: 0;
  left: 0;
`

const MediaPicker = ({
  customComponent,
  type,
  onChange,
  getPage,
  uploadUrl,
  onUpload,
  uploadExtraData,
  onRemoveFile,
  onUpdateImage,
  onCreateFolder,
  onRemoveFolder,
  onLoadFolderList,
  filesCategories,
  value,
  id,
  config,
  withControls,
  withFolders,
  imageProvider,
  accept,
  videoThumbnails,
}) => {
  /**
   * Open media library in overlayer
   */
  const [open, setOpen] = useState(false)

  /**
   * Select media from libraray and show thumb in editor
   */
  const [selectedMedia, setMedia] = useState(value)

  /**
   * If user select image from media libraray
   * close image picker and call onChange event
   */
  const onConfirm = (media, fullItem) => {
    setMedia(fullItem && fullItem.props ? fullItem : media)
    setOpen(false)
    onChange && onChange(media.url ? media.url : media)
  }

  /**
   * In case of external changes
   */
  useEffect(() => {
    if (selectedMedia !== value) {
      setMedia(value)
    }
  }, [value])

  return (
    <div id={id}>
      <ImageProvider microserviceUrl={imageProvider.url} baseUrl={imageProvider.baseUrl} >
        {(selectedMedia && (
          <Thumb
            customIconComponent={customComponent}
            selectedMedia={selectedMedia}
            type={type}
            setOpen={setOpen}
            removeImage={onConfirm}
            withImageProvider={!!imageProvider.url}
            videoThumbnails={videoThumbnails}
          />
        )) || <Add setOpen={setOpen} />}

        <Overlay open={open}>
          {open && (
            <MediaLibrary
              getPage={getPage}
              config={config || defaultConfig}
              onConfirm={onConfirm}
              uploadUrl={uploadUrl}
              onUpload={onUpload}
              uploadExtraData={uploadExtraData}
              onRemoveFile={onRemoveFile}
              onUpdateImage={onUpdateImage}
              onCreateFolder={onCreateFolder}
              onRemoveFolder={onRemoveFolder}
              onLoadFolderList={onLoadFolderList}
              withControls={withControls}
              withFolders={withFolders}
              imageProvider={imageProvider}
              filesCategories={filesCategories}
              onCancel={() => setOpen(false)}
              accept={accept}
              isVideo={type === 'video'}
            />
          )}
        </Overlay>
      </ImageProvider>
    </div>
  )
}

MediaPicker.defaultProps = {
  imageProvider: {
    url: '',
  },
}

export default MediaPicker