import React from 'react';
import CircleIcon from 'app/shared/components/circleIcon/circleIcon';
import * as Text from 'app/shared/components/text/text';
import cx from 'classnames';

export interface Props {
  backgroundImage?: string;
  title?: string;
  text?: string;
  mediaType?: string;
  fileLink?: string;
  isVideo?: boolean;
  onClick?: () => void;
  hideFooter?: boolean;
  fullDimensions?: boolean;
}

const Resource = ({
  backgroundImage,
  title,
  text,
  mediaType,
  fileLink,
  isVideo,
  onClick,
  hideFooter = false,
  fullDimensions = false,
}: Props) => {
  const containerClassName = cx('c-resource', { 'c-resource--full-dimensions': fullDimensions });
  const imageClassName = cx('c-resource__image', { 'c-resource__image--full-dimensions': fullDimensions });
  const overlayClassNames = cx('c-resource__image', 'c-resource__image--overlay',
    { 'c-resource__image--full-dimensions': fullDimensions });

  return <div className={containerClassName}>
    <div className="u-position--relative">
      <img
        className={imageClassName}
        src={backgroundImage || '/assets/images/resource_background.jpg'}
        alt="info"
      />
      <div className={overlayClassNames} />
      <div className="u-position--absolute u-position--center u-cursor--pointer" onClick={onClick}>
        {isVideo && <CircleIcon icon="play-media" isLarge />}
        {!isVideo && fileLink &&
          <a className="c-button c-button--filled c-button--big" href={fileLink} target="_blank" rel="noreferrer">
            <i className="icon-open-box u-margin-right--small" />
            Open
          </a>
        }
      </div>
    </div>
    {!hideFooter && <div className='o-gutter--medium o-gutter-top'>
      {title && <Text.Headline size='h4' extraClass='u-display--block u-margin-bottom--tiny'>{title}</Text.Headline>}
      {text && < Text.Paragraph size='small'
        extraClass='u-display--block u-clear u-margin-bottom--tiny'>{text}</Text.Paragraph>}
      {mediaType && <Text.Menu extraClass='u-display--block u-margin--none u-color--dark-grey'>{mediaType}</Text.Menu>}
    </div>}
  </div>;
};

export { Resource };