import React from "react";
import { View } from "react-native";
import {
  AtlantisThemeContextProvider,
  Button,
  Content,
  Text,
  useAtlantisTheme,
} from "@jobber/components-native";
import type { AtlantisThemeContextProviderProps } from "@jobber/components-native";

function ChildrenComponent({
  message = "It is possible to have multiple Atlantis Theme providers.",
}: {
  readonly message?: string;
}) {
  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();

  return (
    <View style={{ backgroundColor: tokens["color-surface"] }}>
      <Content>
        <Text>{message}</Text>
        <Text>{`Selected theme: ${theme}`}</Text>
        <Text>{`Effective theme: ${effectiveTheme}`}</Text>
        <Text>Tokens can be accessed using tokens[token-name]</Text>
        <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
        <Text>
          Use the selected theme for preference UI and the effective theme for
          non-Atlantis surfaces.
        </Text>
        <Button label="Set system theme" onPress={() => setTheme("system")} />
        <Button label="Set dark theme" onPress={() => setTheme("dark")} />
        <Button label="Set light theme" onPress={() => setTheme("light")} />
      </Content>
    </View>
  );
}

export function AtlantisThemeContextBasicExample(
  props: Partial<Omit<AtlantisThemeContextProviderProps, "children">>,
) {
  return (
    <AtlantisThemeContextProvider {...props}>
      <ChildrenComponent />
    </AtlantisThemeContextProvider>
  );
}