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

import { ASSET_PROP_TYPE, getImageFromField } from '../utils';
import { Picture } from '../picture';

const IMAGE_SIZES = [768, 1400, 1920];
const DEFAULT_STYLES = {
  width: '100%',
  height: '100%',
  left: 0,
  top: 0,
  position: 'fixed',
  zIndex: -1,
  objectFit: 'cover',
  pointerEvents: 'none'
};
const IMAGE_OPTIONS = {
  q: 60,
  // Force format to be jpeg for smaller file size
  fm: 'jpg'
};

const getSrcset = (getImageUrl, imageUrl, sizes, imageOptions) =>
  sizes
    .map(
      (size) =>
        `${getImageUrl(imageUrl, {
          ...imageOptions,
          w: size
        })} ${size}w`
    )
    .join(', ');

export const Background = (props) => {
  const {
    landscape,
    portrait,
    style,
    imageSizes,
    imageOptions,
    webp,
    imgRef,
    getImageUrl,
    ...restProps
  } = props;

  const landscapeUrl = getImageFromField(landscape);
  const portraitUrl = getImageFromField(portrait, 'file.url');
  const defaultUrl = landscapeUrl || portraitUrl;

  const imgStyles = { ...DEFAULT_STYLES, ...style };

  return (
    <Picture
      style={imgStyles}
      sizes="100vw"
      image={{ file: { url: defaultUrl } }}
      srcSet={getSrcset(getImageUrl, defaultUrl, imageSizes, imageOptions)}
      sources={[
        ...(portraitUrl
          ? [
              ...(webp
                ? [
                    {
                      srcSet: getSrcset(getImageUrl, portraitUrl, imageSizes, {
                        ...imageOptions,
                        fm: 'webp'
                      }),
                      type: 'image/webp',
                      sizes: '100vw',
                      media: '(orientation: portrait)'
                    }
                  ]
                : []),
              {
                srcSet: getSrcset(getImageUrl, portraitUrl, imageSizes, imageOptions),
                sizes: '100vw',
                media: '(orientation: portrait)'
              }
            ]
          : []),

        ...(landscapeUrl
          ? [
              ...(webp
                ? [
                    {
                      srcSet: getSrcset(getImageUrl, landscapeUrl, imageSizes, {
                        ...imageOptions,
                        fm: 'webp'
                      }),
                      type: 'image/webp',
                      sizes: '100vw',
                      media: '(orientation: landscape)'
                    }
                  ]
                : []),
              {
                srcSet: getSrcset(getImageUrl, landscapeUrl, imageSizes, imageOptions),
                sizes: '100vw',
                media: '(orientation: landscape)'
              }
            ]
          : []),

        ...(webp
          ? [
              {
                srcSet: getSrcset(getImageUrl, defaultUrl, imageSizes, {
                  ...imageOptions,
                  fm: 'webp'
                }),
                sizes: '100vw',
                type: 'image/webp'
              }
            ]
          : [])
      ]}
      imgRef={imgRef}
      {...restProps}
    />
  );
};

Background.defaultProps = {
  landscape: null,
  portrait: null,
  style: {},
  imageSizes: IMAGE_SIZES,
  imageOptions: IMAGE_OPTIONS,
  webp: false,
  imgRef: null
};

Background.propTypes = {
  /** Landscape background image */
  landscape: ASSET_PROP_TYPE,

  /** Portrait background image */
  portrait: ASSET_PROP_TYPE,

  /** Custom styles */
  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types

  /** Images sizes */
  imageSizes: PropTypes.arrayOf(PropTypes.number),

  /** Image options */
  imageOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types

  /** Webp flag */
  webp: PropTypes.bool,

  /** Image ref */
  imgRef: PropTypes.shape({
    current: PropTypes.object // eslint-disable-line react/forbid-prop-types
  }),

  getImageUrl: PropTypes.func.isRequired
};
