import PropTypes from 'prop-types';
import React from 'react';

import { propTypes as MediaVideoPropTypes } from '../MediaVideo/MediaVideo';
import MediaVideo from '../MediaVideo';
import createItemComponent, {
  propTypes as ItemPropTypes,
} from './createItemComponent';

/* Interface */
const propTypes = {
  /** Desired aspect ratio. */
  aspectRatio: MediaVideoPropTypes.aspectRatio,

  /** ID of post to load. */
  id: ItemPropTypes.id,

  /** The post if already available. */
  item: PropTypes.shape({
    featured_media: PropTypes.number,
    _storyshare_featured_video_id: PropTypes.number,
  }).isRequired,

  /** Slug of post to load. */
  itemSlug: ItemPropTypes.itemSlug,

  /** Configuration for JWPlayer. */
  jwPlayerConfig: MediaVideoPropTypes.jwPlayerConfig,

  /** Content to display while awaiting data. */
  placeholder: ItemPropTypes.placeholder,

  /** ID of the poster medium. */
  posterId: MediaVideoPropTypes.posterId,

  /** Width based on img src will be chosen. */
  posterWidth: MediaVideoPropTypes.posterWidth,

  /** Slug for post type from which posts are drawn. */
  typeSlug: ItemPropTypes.typeSlug,
};

/**
 * Item featured video
 * Additional props will be passed through to `<MediaVideo>`.
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
export const ItemFeaturedVideo = ({
  item: {
    featured_media: itemImageId,
    _storyshare_featured_video_id: itemVideoId,
  },
  posterId,
  ...passThroughProps
}) => {
  if (!itemVideoId) {
    return null;
  }

  return (
    <MediaVideo
      id={ itemVideoId }
      posterId={ posterId || itemImageId }
      { ...passThroughProps }
    />
  );
};

ItemFeaturedVideo.propTypes = propTypes;

export default createItemComponent(['placeholder'])(ItemFeaturedVideo);
