.js

import { Fragment } from 'react';
import {
  StringAttribute,
} from 'exp-ui-api-lib';

const defaultStyle = {
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center top',
}

// eslint-disable-next-line no-useless-escape
const YOUTUBE_REGEX = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;

const getYoutubeUrl = url => {
  const variant = 'mqdefault';
  const matches = YOUTUBE_REGEX.exec(url);

  if (matches && matches[1]) {
    const videoId = matches[1];
    return `https://img.youtube.com/vi/${videoId}/${variant}.jpg`;
  } else {
    throw new Error('Not a youtube url');
  }
};

const HasYoutubeThumbnail = ({ children }) => (
  <StringAttribute
    path="url"
    render={({ get }) => (
      get() && YOUTUBE_REGEX.test(get()) ? children || null : null
    )}
  />
);

const YoutubeThumbnail = ({ get, thumbnailStyle }) => (
  <div
    style={{
      ...defaultStyle,
      ...thumbnailStyle,
      backgroundImage: `url(${getYoutubeUrl(get())})`,
    }}
  />
);

const HasImageThumbnail = ({ children }) => (
  <StringAttribute
    path="variants"
    render={({ get }) => (
      (get() || []).some(variant => variant.name === '320.png') ? children || null : null
    )}
  />
);

const ImageThumbnail = ({ get, thumbnailStyle }) => (
  <div
    style={{
      ...defaultStyle,
      ...thumbnailStyle,
      backgroundImage: `url(https://eagle.goexp.io/api/delivery${get()}?variant=320.png)`,
    }}
  />
);

export default ({ thumbnailStyle }) => (
  <Fragment>
    <HasImageThumbnail>
      <StringAttribute path="path" render={ImageThumbnail} thumbnailStyle={thumbnailStyle} />
    </HasImageThumbnail>
    <HasYoutubeThumbnail>
      <StringAttribute path="url" render={YoutubeThumbnail} thumbnailStyle={thumbnailStyle} />
    </HasYoutubeThumbnail>
  </Fragment>
);