import { View, Text, ScrollView, Image as NativeImage } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Skeleton } from "@rneui/themed";
import { useHeaderHeight } from "@react-navigation/elements";

export default function SpaceIntroduceSkeleton() {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const headerHeight = useHeaderHeight();

  return (
    <View
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView>
        <View style={tailwind("absolute top-0 left-0")}>
          <Skeleton
            style={{
              aspectRatio: "25/17",
              ...tailwind("bg-[#13121F]"),
            }}
            skeletonStyle={{ backgroundColor: "#13121F" }}
            animation="pulse"
            height={256}
          />
        </View>
        <View
          style={{
            marginTop: headerHeight,
            ...tailwind("flex flex-row items-center px-4 h-24"),
          }}
        >
          <Skeleton
            style={tailwind(
              "w-[4.6rem] h-[4.6rem] rounded-full border-2 border-white bg-[#13121F]"
            )}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
          />
          <View style={tailwind("flex flex-col shrink mx-2 justify-between")}>
            <Skeleton
              style={tailwind("bg-[#13121F] rounded-md")}
              skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
              animation="pulse"
              width={150}
              height={35}
            />
            <View style={tailwind("flex-row flex-wrap mt-1.5")}>
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={70}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={100}
                height={20}
              />
            </View>
          </View>
          <View style={tailwind("flex flex-col items-center ml-auto")}>
            <NativeImage
              source={require("../../assets/icon/others/wechat_bg.png")}
            />
            <Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
              查看微信
            </Text>
          </View>
        </View>
        <View
          style={tailwind(
            "flex flex-col w-full rounded-t-3xl bg-[#07050A] mt-4 p-4"
          )}
        >
          <View style={tailwind("flex flex-col items-start")}>
            <View>
              <Text style={tailwind("text-white text-lg font-medium mt-0.5")}>
                空间介绍
              </Text>
              <NativeImage
                style={{ right: -5, bottom: 1, ...tailwind("absolute") }}
                source={require("../../assets/icon/others/pinkline.png")}
              />
            </View>
          </View>
          <Skeleton
            style={tailwind("mt-4 bg-[#13121F] w-full rounded-md")}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
            height={21}
          />
          <Skeleton
            style={tailwind("mt-1 bg-[#13121F] w-2/3 rounded-md")}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
            height={21}
          />
          <View style={tailwind("flex flex-row flex-wrap mt-2")}>
            <View style={tailwind("basis-1/3 p-0.5")}>
              <Skeleton
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("w-full bg-[#13121F] rounded"),
                }}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width="auto"
                height="auto"
              />
              <View
                style={tailwind(
                  "flex absolute w-full h-full left-0 top-0 z-10 justify-center items-center"
                )}
              >
                <NativeImage
                  source={require("../../assets/icon/others/play.png")}
                />
              </View>
            </View>
            <View style={tailwind("basis-1/3 p-0.5")}>
              <Skeleton
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("w-full bg-[#13121F] rounded"),
                }}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width="auto"
                height="auto"
              />
            </View>
            <View style={tailwind("basis-1/3 p-0.5")}>
              <Skeleton
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("w-full bg-[#13121F] rounded"),
                }}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width="auto"
                height="auto"
              />
            </View>
          </View>
          <View style={tailwind("flex flex-col items-start mt-8")}>
            <View>
              <Text style={tailwind("text-white text-lg font-medium mt-0.5")}>
                付费须知
              </Text>
              <NativeImage
                style={{ right: -5, bottom: 1, ...tailwind("absolute") }}
                source={require("../../assets/icon/others/pinkline.png")}
              />
            </View>
          </View>
          <Skeleton
            style={tailwind("mt-4 bg-[#13121F] w-full rounded-md")}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
            height={21}
          />
          <Skeleton
            style={tailwind("mt-1 bg-[#13121F] w-full rounded-md")}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
            height={21}
          />
          <Skeleton
            style={tailwind("mt-1 bg-[#13121F] w-full rounded-md")}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
            height={21}
          />
          <Skeleton
            style={tailwind("mt-1 bg-[#13121F] w-3/4 rounded-md")}
            skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
            animation="pulse"
            height={21}
          />
        </View>
      </ScrollView>
      <View
        style={tailwind(
          "flex flex-row h-[4.5rem] py-2 px-6 items-center justify-center border-t border-[#FFFFFF26]"
        )}
      >
        <View
          style={tailwind(
            "flex flex-row items-center justify-center h-12 rounded-full px-10 bg-[#FF669E]"
          )}
        >
          <NativeImage
            style={tailwind("ml-2")}
            source={require("../../assets/icon/others/money_pink.png")}
          />
          <Text style={tailwind("text-base text-white font-medium ml-2")}>
            立即加入
          </Text>
          <NativeImage source={require("../../assets/icon/32DP/link.png")} />
        </View>
      </View>
    </View>
  );
}