import React from "react";
import { Text, Animated } from "react-native";
import { render } from "@testing-library/react-native";

import {
  NotificationView,
  onlinePhrase,
  offlinePhrase,
} from "../NotificationView";

jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
  usePickFromState: () => ({
    plugins: [
      {
        name: "offline experience",
        identifier: "offline-experience",
        type: "general",
        module: {
          useOfflineExperienceConfiguration: () => ({
            configurationFields: {},
            localizations: {
              offline_toast_message: "No internet connection",
              online_toast_message: "You are back online",
            },
          }),
        },
      },
    ],
  }),
}));

jest.mock("react-native-safe-area-context", () => ({
  useSafeAreaInsets: () => ({ top: 44 }),
}));

const dismiss = jest.fn();

describe("NotificationView", () => {
  it("Show online message when Online", () => {
    const component = render(<NotificationView online dismiss={dismiss} />);

    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
  });

  it("Show offline message when Online", () => {
    const component = render(
      <NotificationView online={false} dismiss={dismiss} />
    );

    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
  });

  it("When hidden is false to true notification is visible", () => {
    const component = render(
      <NotificationView online={false} hidden={false} dismiss={dismiss} />
    );

    component.rerender(
      <NotificationView online={false} hidden={true} dismiss={dismiss} />
    );

    const animatedView = component.UNSAFE_getByType(Animated.View);
    const animatedViewStyles = animatedView.props.style;

    expect(animatedViewStyles.opacity).toBe(1);
  });
});