import * as WebBrowser from "expo-web-browser";
import { StyleSheet, Text } from "react-native";

import { fonts } from "@/constants/theme";
import { useAccounts } from "@/contexts/AccountsContext";
import { useAppTheme } from "@/contexts/ThemeContext";

type LegalAgreementNoticeProps = {
  action: string;
};

function openLegalPage(baseUrl: string, path: "/terms" | "/privacy") {
  const origin = baseUrl.replace(/\/$/, "");
  void WebBrowser.openBrowserAsync(`${origin}${path}`);
}

export function LegalAgreementNotice({ action }: LegalAgreementNoticeProps) {
  const { colors } = useAppTheme();
  const { apiUrl } = useAccounts();

  return (
    <Text style={[styles.text, { color: colors.mutedForeground }]}>
      By {action}, you agree to our{" "}
      <Text
        style={[styles.link, { color: colors.foreground }]}
        onPress={() => openLegalPage(apiUrl, "/terms")}
      >
        Terms of Service
      </Text>{" "}
      and{" "}
      <Text
        style={[styles.link, { color: colors.foreground }]}
        onPress={() => openLegalPage(apiUrl, "/privacy")}
      >
        Privacy Policy
      </Text>
      .
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    textAlign: "center",
    fontSize: 12,
    fontFamily: fonts.body,
    lineHeight: 18,
  },
  link: {
    fontFamily: fonts.bodyMedium,
    textDecorationLine: "underline",
  },
});