/* @flow */
import * as React from 'react'
import defaults, { type ImageType } from '../../types/Image.flow.js'
import VisibilitySensor from 'react-visibility-sensor'
import getImageUrl from '../../utils/getImageUrl'
import getSrc from '../../utils/getSrc'
import { ImageConsumer } from '../ImageContext'

type Props = ImageType & { alt: string }

const getRetina = (props) => (density: number) => ({
  ...props,
  width: props.width * density,
  height: props.height * density,
})

export default function Image({
  width,
  height,
  alt,
  output: componentOutput,
  rotate,
  quality,
  progressive,
  scaleMode,
  flip,
  src,
  blur,
  tag,
  ...props
}: Props) {
  return (
    <ImageConsumer>
      {({ microserviceUrl, output, baseImgComponent, baseUrl }) => {
        const Component = tag || baseImgComponent
        const imgProps = {
          blur,
          flip,
          scaleMode,
          progressive,
          quality,
          rotate,
          output: componentOutput || output,
          height,
          width,
          src: getSrc(src, baseUrl),
        }

        const getRetinaProps = getRetina(imgProps)
        const url = getImageUrl(microserviceUrl, imgProps)
        let srcSet = ''

        if (Array.isArray(width) && Array.isArray(height)) {
          srcSet = `${width.reduce((previousValue, currentValue, index) => {
            const isLastIndex = width.lengt - 1 === index
            return `${previousValue}${getImageUrl(microserviceUrl, {
              ...imgProps,
              width: currentValue,
              height: height[index],
            })} ${currentValue}w${!isLastIndex ? ', ' : ''}`
          }, '')}`
        } else if (Array.isArray(width)) {
          srcSet = `${width.reduce((previousValue, currentValue, index) => {
            const isLastIndex = width.lengt - 1 === index
            return `${previousValue}${getImageUrl(microserviceUrl, {
              ...imgProps,
              width: currentValue,
            })} ${currentValue}w${!isLastIndex ? ', ' : ''}`
          }, '')}`
        } else {
          srcSet = `${getImageUrl(
            microserviceUrl,
            getRetinaProps(2),
          )} 2x, ${getImageUrl(microserviceUrl, getRetinaProps(3))} 3x`
        }

        return (
          <VisibilitySensor
            minTopValue={50}
            intervalDelay={250}
            scrollCheck={true}
            delayedCall={true}
          >
            <Component
              src={url}
              srcSet={srcSet}
              alt={alt}
              {...props}
            />
          </VisibilitySensor>
        )
      }}
    </ImageConsumer>
  )
}

Image.defaultProps = defaults