import React from "react";
import Text from "../../components/atoms/text/text";
import { render, fireEvent } from "@testing-library/react-native";
import { ThemeProvider } from "../src/theme-context";
import Box from "../../components/atoms/box/box";
import Button from "../../components/molecules/button/button";
import { useTheme } from "../../hooks/useTheme";
jest.useFakeTimers();
const ThemeTestComponent = props => {
  const {
    colorMode,
    toggleColorMode,
    switchColorMode
  } = useTheme();
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, colorMode), ";", /*#__PURE__*/React.createElement(Button, {
    onPress: toggleColorMode
  }, "Toggle mode"), /*#__PURE__*/React.createElement(Button, {
    onPress: () => {
      if (props.targetColorMode) switchColorMode(props.targetColorMode);
    }
  }, "Switch mode"));
};
describe("Theme Context", () => {
  it("returns null if fonts haven't loaded", () => {
    const tree = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      haveFontsLoaded: false
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, null))).toJSON();
    expect(tree).toBe(null);
  });
  it("initially loads the light theme", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ThemeTestComponent, null)));
    expect(getByText("light")).toBeTruthy();
  });
  it("loads the dark theme when overriden", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      initialColorMode: "dark"
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, null)));
    expect(getByText("dark")).toBeTruthy();
  });
  it("loads the theme automatically based on the system theme", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      initialColorMode: "system"
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, null)));
    expect(getByText("light")).toBeTruthy();
  });
  it("toggles the theme (light -> dark) correctly", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      initialColorMode: "light"
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, null)));
    expect(getByText("light")).toBeTruthy();
    const toggleButton = getByText(/toggle/i);
    fireEvent.press(toggleButton);
    expect(getByText("dark")).toBeTruthy();
  });
  it("toggles the theme (dark -> light) correctly", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      initialColorMode: "dark"
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, null)));
    expect(getByText("dark")).toBeTruthy();
    const toggleButton = getByText(/toggle/i);
    fireEvent.press(toggleButton);
    expect(getByText("light")).toBeTruthy();
  });
  it("changes the theme from dark -> light correctly using switchColorMode", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      initialColorMode: "dark"
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, {
      targetColorMode: "light"
    })));
    expect(getByText("dark")).toBeTruthy();
    const switchButton = getByText(/switch/i);
    fireEvent.press(switchButton);
    expect(getByText("light")).toBeTruthy();
  });
  it("changes the theme from light -> dark correctly using switchColorMode", () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(ThemeProvider, {
      initialColorMode: "light"
    }, /*#__PURE__*/React.createElement(ThemeTestComponent, {
      targetColorMode: "dark"
    })));
    expect(getByText("light")).toBeTruthy();
    const switchButton = getByText(/switch/i);
    fireEvent.press(switchButton);
    expect(getByText("dark")).toBeTruthy();
  });
});
//# sourceMappingURL=theme-context.spec.js.map