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

export default function SpaceCard({ data }) {
  const navigation = useNavigation();
  const tailwind = useTailwind();
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

  if (data?.last) {
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => navigation.navigate("Stream")}
        style={tailwind("w-full px-1 mt-2")}
      >
        <View
          style={tailwind(
            "flex flex-col relative rounded-lg overflow-hidden bg-[#FFFFFF1A]"
          )}
        >
          <View
            style={{ aspectRatio: "1/1", ...tailwind("w-full z-0") }}
          ></View>
          <View style={{ height: 42, ...tailwind("w-full z-0") }}></View>
          <View
            style={{
              paddingLeft: 22,
              paddingTop: 30,
              ...tailwind("flex flex-col absolute w-full h-full"),
            }}
          >
            <Text
              style={{ fontSize: 22, ...tailwind("text-white font-medium") }}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              发现更多
            </Text>
            <Text
              style={{ fontSize: 22, ...tailwind("text-[#FFFFFF40] text-sm") }}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              缘分就在不经意间
            </Text>
            <NativeImage
              style={tailwind("mt-4")}
              source={require("../../assets/icon/others/rightarrow_border.png")}
            />
            <NativeImage
              style={{ right: 0, ...tailwind("absolute bottom-0") }}
              source={require("../../assets/icon/others/magnifier.png")}
            />
          </View>
        </View>
      </TouchableOpacity>
    );
  }

  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={() => navigation.navigate("StreamerSpace", { mid: data.mid })}
      style={tailwind("w-full px-1 mt-2")}
    >
      <View style={tailwind("flex flex-col rounded-lg overflow-hidden")}>
        <Image
          source={data.streamer_ext.cover.images[0].urls[0]}
          contentFit="cover"
          transition={1000}
          placeholder={blurhash}
          cachePolicy="disk"
          style={{ aspectRatio: "1/1", ...tailwind("w-full z-0") }}
        />
        {data.is_unread_zone_moment_exist === 1 && (
          <NativeImage
            style={{ right: 2, ...tailwind("absolute top-0") }}
            source={require("../../assets/icon/others/space_new.png")}
          />
        )}
        <View
          style={{
            height: 42,
            gap: 4,
            ...tailwind(
              "flex flex-row w-full items-center px-2.5 bg-[#FFFFFF1A]"
            ),
          }}
        >
          <Text
            style={tailwind("shrink text-white text-sm font-medium")}
            numberOfLines={1}
            ellipsizeMode="tail"
          >
            {data.streamer_ext.name}
          </Text>
          {data.admission_price !== 0 && (
            <View
              style={{
                paddingHorizontal: 3,
                height: 14,
                borderRadius: 2,
                ...tailwind("flex items-center justify-center bg-[#FF669E]"),
              }}
            >
              <Text
                style={{ fontSize: 9, ...tailwind("text-white font-medium") }}
              >
                付费
              </Text>
            </View>
          )}
          {data.visitor_role === 3 && (
            <View
              style={{
                paddingHorizontal: 3,
                height: 14,
                borderRadius: 2,
                ...tailwind("flex items-center justify-center bg-[#FF669E]"),
              }}
            >
              <Text
                style={{ fontSize: 9, ...tailwind("text-white font-medium") }}
              >
                创建者
              </Text>
            </View>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
}