import * as React from "react";
import { View, StyleSheet } from "react-native";

import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
import { useUrlSchemeHandler } from "./SchemeHandlerHooks/useUrlSchemeHandler";

type Props = {
  url: string;
  onFinish: (callback: (done: () => void) => void) => void;
};

const viewStyles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export function URLSchemeHandler({ url, onFinish }: Props) {
  const theme = useTheme();
  const { width, height } = useDimensions("screen");

  const backgroundColor = React.useMemo(() => {
    return theme?.app_background_color;
  }, [theme?.app_background_color]);

  useUrlSchemeHandler({ url, onFinish });

  return (
    <View style={[viewStyles.container, { width, height, backgroundColor }]}>
      <Spinner size="large" />
    </View>
  );
}