import Enzyme, { shallow } from 'enzyme'
import EnzymeAdapter from 'enzyme-adapter-react-16'
import * as React from 'react'
import renderer from 'react-test-renderer'
import { Image, ImageBox, ImageProvider } from '../src'

Enzyme.configure({ adapter: new EnzymeAdapter() })

describe('<ImageProvider />', () => {
  test('change microserviceUrl', () => {
    const tree = renderer
      .create(
        <ImageProvider disableWebpSupportCheck microserviceUrl="https://foo.bar">
          <Image src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Michelangelo_Buonarroti_017.jpg" />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })

  test('relative img path', () => {
    const tree = renderer
      .create(
        <ImageProvider
          baseUrl="https://airbank-beta.siteone.cz"
          disableWebpSupportCheck
          microserviceUrl="https://foo.bar"
        >
          <Image src="/data/cms/produkty-bezny-ucet-02afgo.png" />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('wrong src input', () => {
    const tree = renderer
      .create(
        <ImageProvider
          baseUrl="https://airbank-beta.siteone.cz"
          disableWebpSupportCheck
          microserviceUrl="https://foo.bar"
        >
          <Image src={10} />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('baseUrl defined, absolute src', () => {
    const tree = renderer
      .create(
        <ImageProvider
          baseUrl="https://airbank-beta.siteone.cz"
          disableWebpSupportCheck
          microserviceUrl="https://foo.bar"
        >
          <Image src="http://foo.bar" />
          <ImageBox scaleMode="fill" width={100} src="/data/cms/produkty-bezny-ucet-02afgo.png" />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })

  test('relative img path with no baseUrl', () => {
    const tree = renderer
      .create(
        <ImageProvider disableWebpSupportCheck microserviceUrl="https://foo.bar">
          <Image src="/data/cms/produkty-bezny-ucet-02afgo.png" />
          <ImageBox scaleMode="fill" src="/data/cms/produkty-bezny-ucet-02afgo.png" />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })

  test('change base img component', () => {
    const tree = renderer
      .create(
        <ImageProvider disableWebpSupportCheck baseImgComponent="foo">
          <Image src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Michelangelo_Buonarroti_017.jpg" />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })

  test('change base imgbox component', () => {
    const tree = renderer
      .create(
        <ImageProvider disableWebpSupportCheck baseImgBoxComponent="foo">
          <ImageBox src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Michelangelo_Buonarroti_017.jpg" />
        </ImageProvider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })

  test('browser not supports webp', done => {
    global.createImageBitmap = null
    const wrapper = shallow(<ImageProvider />)

    process.nextTick(() => {
      expect(wrapper.props()).toEqual({
        children: undefined,
        value: {
          baseImgBoxComponent: 'div',
          baseImgComponent: 'img',
          microserviceUrl: 'https://img.siteone.cz',
          baseUrl: undefined,
          output: undefined,
          resolvedOutput: true
        },
      })

      done()
    })
  })
})