import { View, Text, TouchableOpacity, Modal } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { Button } from "@rneui/themed";
import { useNavigation } from "@react-navigation/native";

export default function PrivatyModal({ visible, setVisible, confirm }) {
  const tailwind = useTailwind();
  const navigation = useNavigation();
  return (
    <Modal
      visible={visible}
      statusBarTranslucent
      transparent={true}
      style={tailwind("flex-1")}
    >
      <View
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex-1 items-center justify-center"),
        }}
      >
        <View
          style={tailwind("p-4 rounded-2xl bg-[#1E1C29] items-center w-3/4")}
        >
          <Text
            style={tailwind("text-white text-xl font-semibold text-center")}
          >
            个人信息保护指引
          </Text>
          <Text
            style={tailwind("text-[#FFFFFF80] text-sm font-medium mt-2 mb-4")}
          >
            欢迎您使用铁粉空间。为了更好地给您提供相关服务，我们会根据您使用服务的具体功能需要，搜集必要的用户信息。您可以通过阅读
            <Text
              onPress={() => {
                navigation.navigate("WebWithHeader", {
                  title: "用户协议",
                  uri: `${process.env.EXPO_PUBLIC_WEB_URL}/doc/useragreement`,
                });
                setVisible(false);
              }}
              style={tailwind("text-[#FF669E]")}
            >
              《用户协议》
            </Text>
            和
            <Text
              style={tailwind("text-[#FF669E]")}
              onPress={() => {
                navigation.navigate("WebWithHeader", {
                  title: "隐私政策",
                  uri: `${process.env.EXPO_PUBLIC_WEB_URL}/doc/privatypolicy`,
                });
                setVisible(false);
              }}
            >
              《隐私政策》
            </Text>
            来了解我们收集、使用、存储和共享个人信息的情况，以及对您个人隐私的保护措施。
            点击“同意并继续”代表您已阅读且同意
            <Text
              onPress={() => {
                navigation.navigate("WebWithHeader", {
                  title: "用户协议",
                  uri: `${process.env.EXPO_PUBLIC_WEB_URL}/doc/useragreement`,
                });
                setVisible(false);
              }}
              style={tailwind("text-[#FF669E]")}
            >
              《用户协议》
            </Text>
            和
            <Text
              style={tailwind("text-[#FF669E]")}
              onPress={() => {
                navigation.navigate("WebWithHeader", {
                  title: "隐私政策",
                  uri: `${process.env.EXPO_PUBLIC_WEB_URL}/doc/privatypolicy`,
                });
                setVisible(false);
              }}
            >
              《隐私政策》
            </Text>
            的全部内容。
          </Text>
          <Button
            onPress={confirm}
            color="#FF669E"
            radius="999"
            size="md"
            titleStyle={tailwind("text-base")}
            containerStyle={tailwind("w-full px-4")}
          >
            同意
          </Button>
          <TouchableOpacity
            onPress={() => setVisible(false)}
            style={tailwind("mt-4")}
          >
            <Text
              style={tailwind(
                "text-[#FFFFFF80] text-base font-medium text-center"
              )}
            >
              不同意
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}