import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import React 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";

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 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 = `${webUrl}/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>
  );
}