import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";
import MyDivider from "../../components/MyDivider";
import { Icon } from "@rneui/themed";
import * as Clipboard from "expo-clipboard";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";

export default function ShareSpace({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const data = route.params.data;
  const webUrl = process.env.EXPO_PUBLIC_WEB_URL;

  const [shareRedirectUrl, setShareRedirectUrl] = useState("");
  useEffect(() => {
    const getShareRedirectUrl = async () => {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      try {
        const base = await baseRequest();
        const body = {
          ...base,
        };
        const signature = await generateSignature(body);
        const _response = await fetch(
          `${apiUrl}/api/config/cold_config?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(body),
          }
        );
        const _data = await _response.json();
        if (_data.ret === -1) {
          return;
        }
        setShareRedirectUrl(_data.data.share_redirect_url);
      } catch (error) {
        console.error(error);
      }
    };
    getShareRedirectUrl();
  }, []);

  //保存内容到剪贴板
  const copy = async (_data) => {
    await Clipboard.setStringAsync(_data);
    Toast.show({
      type: "success",
      text1: "已复制到剪贴板",
      topOffset: 60,
    });
  };

  //复制口令
  const copyShareCode = async () => {
    const shareCode = `【${data?.streamer_ext?.name}】『ID：${data?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情${webUrl}/zone/${data?.streamer_ext?.user_id}`;
    await copy(shareCode);
  };

  //复制邀请链接
  const copyShareUrl = async () => {
    const shareCode = `${shareRedirectUrl}/zone/${data?.streamer_ext?.user_id}`;
    await copy(shareCode);
  };

  return (
    <ScrollView
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("flex flex-col px-4")}>
        <TouchableOpacity
          onPress={copyShareCode}
          style={tailwind("flex-row justify-between pt-4 pb-2")}
        >
          <Text style={tailwind("text-base text-white")}>复制口令</Text>
          <Icon name="chevron-forward-outline" type="ionicon" color="white" />
        </TouchableOpacity>
        <MyDivider />
        <TouchableOpacity
          onPress={copyShareUrl}
          style={tailwind("flex-row justify-between pt-4 pb-2")}
        >
          <Text style={tailwind("text-base text-white")}>复制邀请链接</Text>
          <Icon name="chevron-forward-outline" type="ionicon" color="white" />
        </TouchableOpacity>
        <MyDivider />
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("WebWithoutHeader", {
              uri: webUrl + "/zone/share/" + data?.streamer_ext?.user_id,
            })
          }
          style={tailwind("flex-row justify-between pt-4 pb-2")}
        >
          <Text style={tailwind("text-base text-white")}>生成分享卡片</Text>
          <Icon name="chevron-forward-outline" type="ionicon" color="white" />
        </TouchableOpacity>
        <MyDivider />
      </View>
    </ScrollView>
  );
}