/* eslint-disable react-native/no-inline-styles */
import React from "react";
import { render } from "@testing-library/react-native";
import { SecondaryImage } from "../Image";

describe("SecondaryImage - Image", () => {
  it("SecondaryImage should not render if no uri", async () => {
    const wrapper = await render(
      <SecondaryImage
        displayMode="dynamic"
        uri={undefined}
        style={{ width: 100 }}
        imageSizing="fit"
        fitPosition="center"
        fixedWidth={0}
        fixedHeight={0}
      />
    );

    expect(wrapper.toJSON()).toEqual(null);
    expect(wrapper.toJSON()).toMatchSnapshot();
  });

  it("SecondaryImage should not render if no aspect ratio (dynamic)", async () => {
    const wrapper = await render(
      <SecondaryImage
        displayMode="dynamic"
        uri="someurl"
        style={{ width: 100 }}
        imageSizing="fit"
        fitPosition="center"
        fixedWidth={0}
        fixedHeight={0}
      />
    );

    expect(wrapper.toJSON()).toEqual(null);
    expect(wrapper.toJSON()).toMatchSnapshot();
  });

  it("SecondaryImage should render if known dimensions", async () => {
    const wrapper = await render(
      <SecondaryImage
        uri="someUrl"
        displayMode="dynamic"
        style={{ width: 100, height: 100, borderRadius: 10 }}
        imageSizing="fill"
        fitPosition="center"
        fixedWidth={0}
        fixedHeight={0}
      />
    );

    expect(wrapper.toJSON()).not.toEqual(null);
    expect(wrapper.toJSON()).toMatchSnapshot();
  });

  it("SecondaryImage should render in fixed mode without image until loaded", async () => {
    const wrapper = await render(
      <SecondaryImage
        displayMode="fixed"
        uri="someurl"
        style={{ width: 100, height: 100, borderRadius: 5 }}
        imageSizing="fit"
        fitPosition="center"
        fixedWidth={100}
        fixedHeight={100}
      />
    );

    expect(wrapper.toJSON()).toMatchSnapshot();
  });

  it("SecondaryImage should not render in dynamic mode without image", async () => {
    const wrapper = await render(
      <SecondaryImage
        displayMode="dynamic"
        uri={null}
        style={{ width: 100, height: 100 }}
        imageSizing="fit"
        fitPosition="center"
        fixedWidth={0}
        fixedHeight={0}
      />
    );

    expect(wrapper.toJSON()).toEqual(null);
    expect(wrapper.toJSON()).toMatchSnapshot();
  });

  it("SecondaryImage should render in fixed mode with known dimensions", async () => {
    const wrapper = await render(
      <SecondaryImage
        uri="someUrl"
        displayMode="fixed"
        style={{ width: 100, height: 100, borderRadius: 10 }}
        imageSizing="fill"
        fitPosition="center"
        fixedWidth={100}
        fixedHeight={100}
      />
    );

    expect(wrapper.toJSON()).not.toEqual(null);
    expect(wrapper.toJSON()).toMatchSnapshot();
  });

  it("SecondaryImage dynamic mode should call onAsyncRender when provided", async () => {
    const wrapper = await render(
      <SecondaryImage
        uri="someUrl"
        displayMode="dynamic"
        style={{ width: 100, height: 100, borderRadius: 10 }}
        imageSizing="fill"
        fitPosition="center"
        fixedWidth={0}
        fixedHeight={0}
      />
    );

    expect(wrapper.toJSON()).not.toEqual(null);
  });

  it("SecondaryImage fixed mode should not use async render props", async () => {
    const wrapper = await render(
      <SecondaryImage
        uri="someUrl"
        displayMode="fixed"
        style={{ width: 100, height: 100, borderRadius: 10 }}
        imageSizing="fill"
        fitPosition="center"
        fixedWidth={100}
        fixedHeight={100}
      />
    );

    expect(wrapper.toJSON()).not.toEqual(null);
    expect(wrapper.toJSON()).toMatchSnapshot();
  });
});