import React from 'react'
import PropTypes from 'prop-types'
import { selectSystemProps } from '@telus-uds/components-base'
import ResponsiveImage from '../ResponsiveImage'
import { hasWebpSupport, getImageUrls } from './utils'
import { htmlAttrs } from '../utils'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])

const OptimizeImage = React.forwardRef(
  (
    {
      contentfulAssetUrl,
      alt,
      quality = 80,
      xs = 320,
      sm = 576,
      md = 768,
      lg = 992,
      xl = 1200,
      sizeByHeight = false,
      disableRetina = false,
      ...rest
    },
    ref
  ) => {
    // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
    const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w'
    // by default assuming webP support for SSR
    const [imgUrls, setImgUrls] = React.useState(
      getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true)
    )

    React.useEffect(() => {
      // Checking for webP support for CSR
      hasWebpSupport().then((supportsWebp) => {
        const imageUrls = getImageUrls(
          contentfulAssetUrl,
          dimension,
          xs,
          sm,
          md,
          lg,
          xl,
          quality,
          disableRetina,
          supportsWebp
        )
        setImgUrls(imageUrls)
      })
    }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs])

    if (!imgUrls) return null
    return <ResponsiveImage {...imgUrls} alt={alt} {...selectProps(rest)} ref={ref} />
  }
)

OptimizeImage.displayName = 'OptimizeImage'

OptimizeImage.propTypes = {
  ...selectedSystemPropTypes,
  /**
   * The source to load the image. Only contentful image urls are supported. See https://www.contentful.com/developers/docs/references/images-api/ for details.
   */
  contentfulAssetUrl: PropTypes.string.isRequired,
  /**
   * Alternative text to display if image cannot be loaded or a screen reader is used.
   */
  alt: PropTypes.string.isRequired,
  /**
   * Customize quality as a percentage between 1 and 100.
   */
  quality: PropTypes.number,
  /**
   * Customize width for xs screen size in px, this may affect the quality of the image.
   */
  xs: PropTypes.number,
  /**
   * Customize width for sm screen size in px, this may affect the quality of the image.
   */
  sm: PropTypes.number,
  /**
   * Customize width for md screen size in px, this may affect the quality of the image.
   */
  md: PropTypes.number,
  /**
   * Customize width for lg screen size in px, this may affect the quality of the image.
   */
  lg: PropTypes.number,
  /**
   * Customize width for xl screen size in px, this may affect the quality of the image.
   */
  xl: PropTypes.number,
  /**
   * Switches size dimension to height, default is false
   */
  sizeByHeight: PropTypes.bool,
  /**
   * Turns off retina display functionality
   */
  disableRetina: PropTypes.bool,
  /**
   * Loading strategy.
   * @default 'eager'
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
   */
  loading: PropTypes.oneOf(['eager', 'lazy'])
}

export default OptimizeImage