// @flow
import * as React from 'react'
import WebpIsSupported from '../../utils/WebpIsSupported'

export type ThemeProviderProps = {
  microserviceUrl: string,
  baseImgComponent: any,
  baseImgBoxComponent: any,
  children: any,
  disableWebpSupportCheck?: boolean,
  output?: 'jpeg' | 'webp' | 'tiff',
}

export const ImageContext = React.createContext({
  microserviceUrl: 'https://img.frontend.company',
  baseImgBoxComponent: 'div',
  baseImgComponent: 'img',
  output: WebpIsSupported() ? 'webp' : undefined,
  resolvedOutput: true,
})

export class ImageProvider extends React.Component<ThemeProviderProps> {
  shouldComponentUpdate() {
    return false
  }

  render() {
    const {
      children,
      microserviceUrl = 'https://img.siteone.cz',
      baseImgBoxComponent = 'div',
      baseImgComponent = 'img',
      disableWebpSupportCheck = false,
      baseUrl,
    } = this.props

    const provideData = {
      output: disableWebpSupportCheck
        ? undefined
        : WebpIsSupported()
        ? 'webp'
        : undefined,
      microserviceUrl,
      baseImgBoxComponent,
      baseImgComponent,
      baseUrl,
      resolvedOutput: true,
    }
    return (
      <ImageContext.Provider value={provideData}>
        {children}
      </ImageContext.Provider>
    )
  }
}

export const ImageConsumer = ImageContext.Consumer