import React from "react";
import "jest-styled-components/native";
import { act } from "react-dom/test-utils";
import { OrganismAlertMessage, IAlertMessageProps } from "./index";
import { render } from "@testing-library/react-native";
import { Dimensions } from "react-native";

describe("[Native] AlertMessage", () => {
  const props: IAlertMessageProps = {
    type: "info",
    title: "This is sample message for info modals",
    message:
      "Lorem ipsum dolors sit amet proin gravid electum sum prompectum delect.",
    textFirstBtn: "Yes, leave quiz",
    textSecondBtn: "Cancel",
  };

  it("Render component AlertMessage", async () => {
    await act(async () => {
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component).toBeDefined();
    });
  });

  it("Render component AlertMessage success", async () => {
    await act(async () => {
      props.type = "success";
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component.container.props.type).toEqual("success");
    });
  });

  it("Render component AlertMessage error", async () => {
    await act(async () => {
      props.type = "error";
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component.container.props.type).toEqual("error");
    });
  });

  it("Render component AlertMessage info", async () => {
    await act(async () => {
      props.type = "info";
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component.container.props.type).toEqual("info");
    });
  });

  it("Render component AlertMessage custom", async () => {
    await act(async () => {
      props.type = "custom";
      props.customIcon = "beer";
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component.container.props.type).toEqual("custom");
    });
  });

  it("Render component AlertMessage second Btn", async () => {
    await act(async () => {
      props.type = "info";
      props.textSecondBtn = "cancel";
      props.enableSecundaryBtn = true;
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component.queryByText("cancel")).toBeDefined();
    });
  });

  it("Render component AlertMessage movile info", async () => {
    await act(async () => {
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 414, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(414);
    });
  });

  it("Render component AlertMessage descktop info", async () => {
    await act(async () => {
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 800, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(800);
    });
  });

  it("Render component AlertMessage movile success", async () => {
    await act(async () => {
      props.type = "success";
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 414, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(414);
    });
  });

  it("Render component AlertMessage descktop success", async () => {
    await act(async () => {
      props.type = "success";
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 800, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(800);
    });
  });

  it("Render component AlertMessage movile error", async () => {
    await act(async () => {
      props.type = "error";
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 414, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(414);
    });
  });

  it("Render component AlertMessage descktop error", async () => {
    await act(async () => {
      props.type = "error";
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 800, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(800);
    });
  });
  it("Render component AlertMessage movile custom", async () => {
    await act(async () => {
      props.type = "custom";
      props.customIcon = "beer";
      props.message = undefined;
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 414, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(414);
    });
  });
  it("Render component AlertMessage descktop custom", async () => {
    await act(async () => {
      props.type = "custom";
      props.customIcon = "beer";
      props.message = undefined;
      jest
        .spyOn(Dimensions, "get")
        .mockReturnValue({ width: 800, height: 818, fontScale: 0, scale: 0 });
      render(<OrganismAlertMessage {...props} />);

      const screenWidth = Dimensions.get("window").width;

      expect(screenWidth).toEqual(800);
    });
  });

  it("Render component AlertMessage desktop success with backgrounColor and custom size", async () => {
    await act(async () => {
      props.type = "success";
      props.backgroundColor = "rgba(0,0,0,0.3)";
      props.width = "400px";
      props.height = "400px";
      window = Object.assign(window, { innerWidth: 800 });
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component).toBeDefined();
    });
  });

  it("Render component AlertMessage desktop error with backgrounColor and custom size", async () => {
    await act(async () => {
      props.type = "error";
      props.backgroundColor = "rgba(0,0,0,0.3)";
      props.width = "400px";
      props.height = "400px";
      window = Object.assign(window, { innerWidth: 800 });
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component).toBeDefined();
    });
  });

  it("Render component AlertMessage desktop info with backgrounColor and custom size", async () => {
    await act(async () => {
      props.type = "info";
      props.backgroundColor = "rgba(0,0,0,0.3)";
      props.width = "400px";
      props.height = "400px";
      window = Object.assign(window, { innerWidth: 800 });
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component).toBeDefined();
    });
  });

  it("Render component AlertMessage desktop custom with backgrounColor and custom size", async () => {
    await act(async () => {
      props.type = "custom";
      props.backgroundColor = "rgba(0,0,0,0.3)";
      props.width = "400px";
      props.height = "400px";
      window = Object.assign(window, { innerWidth: 800 });
      const component = render(<OrganismAlertMessage {...props} />);

      expect(component).toBeDefined();
    });
  });
});
