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

export default function StreamerNavigatorModal({ status, setStatus }) {
  const tailwind = useTailwind();
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
  const navigation = useNavigation();

  return (
    <Modal
      visible={status.open}
      transparent={true}
      statusBarTranslucent
      animationType="fade"
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => setStatus({ ...status, open: false })}
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex-1 justify-center items-center"),
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={tailwind(
            "rounded-2xl bg-[#1E1C29] items-center w-3/4 overflow-hidden"
          )}
        >
          <View style={tailwind("flex flex-col w-full")}>
            <Image
              source={status.data?.cover?.images[0]?.urls[0]}
              contentFit="cover"
              transition={1000}
              placeholder={blurhash}
              cachePolicy="disk"
              style={{ aspectRatio: 1, ...tailwind("w-full") }}
            />
            <View style={tailwind("p-4")}>
              <View style={tailwind("flex flex-row items-center")}>
                <Text
                  style={tailwind("text-xl text-white font-medium mr-1")}
                  numberOfLines={1}
                  ellipsizeMode="tail"
                >
                  {status.data?.name}
                </Text>
                <NativeImage
                  source={require("../../assets/icon/others/verification.png")}
                />
              </View>
              <Text style={tailwind("text-sm text-[#FFFFFFB2] mt-1")}>
                {status.data?.bio}
              </Text>
              <Button
                onPress={
                  status.data?.zones?.length === 0
                    ? () => {
                        navigation.navigate("StreamerProfile", {
                          mid: status.data?.mid,
                        });
                        setStatus({ ...status, open: false });
                      }
                    : () => {
                        navigation.navigate("SpaceIntroduce", {
                          mid: status.data?.mid,
                        });
                        setStatus({ ...status, open: false });
                      }
                }
                color="#FF669E"
                radius="999"
                size="md"
                titleStyle={tailwind("text-base")}
                containerStyle={tailwind("w-full px-4 mt-4")}
              >
                {status.data?.zones?.length === 0 ? "查看主页" : "查看空间"}
              </Button>
            </View>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
}