import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  TouchableWithoutFeedback,
  Platform,
  Image as NativeImage,
} from "react-native";
import React, { useEffect, useState } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import VideoModal from "../VideoModal";
import { useNavigation } from "@react-navigation/native";
import formatTimestamp from "../../utils/formatTimestamp";
import { block } from "../../utils/relation";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import Toast from "react-native-toast-message";
import { get } from "../../utils/storeInfo";
import { Icon } from "@rneui/themed";
import ParsedText from "react-native-parsed-text";
import * as Linking from "expo-linking";
import { useImageViewer } from "../../context/ImageViewProvider";

//todo:完善视频逻辑；完善图片模糊逻辑
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

export default function SpacePost({ data }) {
  const tailwind = useTailwind();
  const navigation = useNavigation();
  const [like, setLike] = useState(
    data?.is_zone_moment_thumbed_up === 1 ? true : false
  );
  const [showVideo, setShowVideo] = useState(false);

  //判断是否是发帖人
  const [isCreator, setIsCreator] = useState(false);
  useEffect(() => {
    const checkAuth = async () => {
      const account = await get("account");
      if (account.mid === data.mid) setIsCreator(true);
    };
    checkAuth();
  }, []);

  //点赞和取消点赞功能
  const thumbsUp = async (id, times = 1) => {
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    try {
      const base = await baseRequest();
      const signature = await generateSignature({
        zone_moment_id: id,
        times: times,
        ...base,
      });
      const _response = await fetch(
        `${apiUrl}/api/zone_moment/thumbs_up?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            zone_moment_id: id,
            times: times,
            ...base,
          }),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
    } catch (error) {
      console.error(error);
    }
  };
  const handleLike = () => {
    setLike(!like);
    if (like) {
      thumbsUp(data.id, -1);
      return;
    }
    thumbsUp(data.id, 1);
  };

  //帖子操作功能
  const [operationModalVisible, setOperationModalVisible] = useState(false);

  //点击文本中的网址
  const handleURLPress = (url) => {
    Linking.openURL(url);
  };

  //网址样式
  const renderLink = (matchingString, matches) => {
    return (
      <Text
        style={tailwind("text-[#3B69B8]")}
        onPress={() => handleURLPress(matchingString)}
      >
        #网页链接
      </Text>
    );
  };

  return (
    <View style={tailwind("flex flex-col")}>
      {data?.is_headed === 1 && (
        <NativeImage
          style={tailwind("absolute left-0 top-0")}
          source={require("../../assets/icon/others/top_post.png")}
        />
      )}
      <View
        style={{
          ...tailwind("flex"),
          paddingTop: 20,
          paddingLeft: 14,
          paddingBottom: 6,
        }}
      >
        <View style={tailwind("flex flex-row")}>
          <TouchableWithoutFeedback
            onPress={() =>
              navigation.navigate("StreamerProfile", { mid: data?.mid })
            }
          >
            <Image
              style={tailwind("w-9 h-9 rounded-full")}
              source={data?.streamer_ext?.avatar?.images[0]?.urls[0]}
              placeholder={blurhash}
              contentFit="cover"
              transition={100}
              cachePolicy="disk"
            />
          </TouchableWithoutFeedback>
          <View
            style={tailwind("flex flex-col flex-1 justify-around ml-2 pr-4")}
          >
            <View
              style={tailwind("flex flex-row items-center justify-between")}
            >
              <Text style={tailwind("text-base font-medium text-white")}>
                {data?.streamer_ext?.name}
              </Text>
            </View>
            {(data?.status === 0 || data?.status === 1) && (
              <View style={tailwind("flex flex-col items-start mt-2")}>
                <View
                  style={{
                    backgroundColor: "#3B69B8",
                    ...tailwind("py-1 px-2 rounded"),
                  }}
                >
                  <Text style={tailwind("text-white text-sm")}>审核中</Text>
                </View>
              </View>
            )}
            {data?.status === 3 && (
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("EditSpacePost", { data: data })
                }
                style={tailwind("flex flex-col items-start mt-2")}
              >
                <View style={tailwind("py-1 px-2 bg-[#F53030] rounded")}>
                  <Text style={tailwind("text-white text-sm")}>
                    审核未通过，请
                    <Text style={{ textDecorationLine: "underline" }}>
                      重新编辑
                    </Text>
                  </Text>
                </View>
              </TouchableOpacity>
            )}
            <ParsedText
              style={tailwind("text-base text-white font-medium my-2")}
              parse={[
                {
                  type: "url",
                  renderText: renderLink,
                },
              ]}
              numberOfLines={
                data.is_zone_moment_unlocked === 0 ? data.text_visible_range : 0
              }
              ellipsizeMode="tail"
            >
              {data?.text}
            </ParsedText>
            {/* 媒体展示 */}
            <View style={tailwind("pr-10 mb-1")}>
              {data.media_component.video_ids?.length === 0 ||
              data.media_component.video_ids === null ? (
                <ImageDisplay
                  data={data}
                  isCreator={isCreator}
                  isUnlocked={data.is_zone_moment_unlocked}
                  visibleRange={data.media_visible_range}
                  mediaAmount={data.media_amount}
                  media={data.media_component?.images}
                />
              ) : (
                <TouchableOpacity
                  activeOpacity={1}
                  onPress={
                    data.is_zone_moment_unlocked === 1
                      ? () => {
                          setShowVideo(true);
                        }
                      : () =>
                          navigation.navigate("WebWithoutHeader", {
                            uri:
                              process.env.EXPO_PUBLIC_WEB_URL +
                              "/zone/pay/" +
                              data?.zid +
                              "/h5_zone_moment/" +
                              data?.id,
                          })
                  }
                >
                  <View>
                    <PosterDisplay
                      isUnlocked={data.is_zone_moment_unlocked}
                      blurCover={data.is_blurring_cover}
                      media={data.media_component?.videos[0]}
                    />
                    <VideoModal
                      visible={showVideo}
                      setVisible={setShowVideo}
                      url={data.media_component.videos[0].urls[0]}
                    />
                  </View>
                </TouchableOpacity>
              )}
            </View>
            {/* 用户未解锁时展示 */}
            {data.c_type === 1 && data.is_zone_moment_unlocked === 0 && (
              <TouchableOpacity
                activeOpacity={1}
                onPress={() =>
                  navigation.navigate("WebWithoutHeader", {
                    uri:
                      process.env.EXPO_PUBLIC_WEB_URL +
                      "/zone/pay/" +
                      data?.zid +
                      "/h5_zone_moment/" +
                      data?.id,
                  })
                }
                style={{
                  backgroundColor:
                    data.is_ironfan_visible === 1 ? "#301024" : "#331F0B",
                  ...tailwind("flex flex-col py-2.5 px-3 mr-10 rounded-lg"),
                }}
              >
                <View
                  style={tailwind("flex flex-row justify-between items-center")}
                >
                  <View style={tailwind("flex flex-row items-center")}>
                    <NativeImage
                      source={
                        data.is_ironfan_visible === 1
                          ? require("../../assets/icon/others/money_pink.png")
                          : require("../../assets/icon/others/money_gold.png")
                      }
                    />
                    <Text
                      style={{
                        color:
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
                        ...tailwind("text-base font-semibold ml-1"),
                      }}
                    >
                      {data.price / 100}
                    </Text>
                    <Text
                      style={{
                        color:
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
                        ...tailwind("text-sm font-medium"),
                      }}
                    >
                      元
                    </Text>
                  </View>
                  <View style={tailwind("flex flex-row items-center")}>
                    <Text
                      style={{
                        color:
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
                        ...tailwind("text-sm font-medium"),
                      }}
                    >
                      {data.is_ironfan_visible === 1
                        ? "铁粉免费查看"
                        : data.is_superfanship_enabled === 1
                        ? "超粉免费查看"
                        : "付费解锁"}
                    </Text>
                    <Icon
                      type="ionicon"
                      name="chevron-forward"
                      size={16}
                      color={
                        data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"
                      }
                    />
                  </View>
                </View>
                {data.is_ironfan_visible === 1 && (
                  <Text style={tailwind("text-xs text-[#FFFFFF40] mt-1")}>
                    空间内任意消费满{data.ironfanship_price / 100}即可成为铁粉
                  </Text>
                )}
              </TouchableOpacity>
            )}
            {/* 用户已解锁时展示 */}
            {data.c_type === 1 &&
              data.is_zone_moment_unlocked === 1 &&
              !isCreator && (
                <TouchableOpacity
                  activeOpacity={1}
                  style={{
                    backgroundColor:
                      data.is_ironfan_visible === 1 ? "#301024" : "#331F0B",
                    ...tailwind("flex flex-col py-2.5 px-3 mr-10 rounded-lg"),
                  }}
                >
                  <View
                    style={tailwind(
                      "flex flex-row justify-between items-center"
                    )}
                  >
                    <View style={tailwind("flex flex-row items-center")}>
                      <NativeImage
                        source={
                          data.is_ironfan_visible === 1
                            ? require("../../assets/icon/others/money_pink.png")
                            : require("../../assets/icon/others/money_gold.png")
                        }
                      />
                      <Text
                        style={{
                          color:
                            data.is_ironfan_visible === 1
                              ? "#FF669E"
                              : "#FFD685",
                          ...tailwind("text-base font-semibold ml-1"),
                        }}
                      >
                        {data.price / 100}
                      </Text>
                      <Text
                        style={{
                          color:
                            data.is_ironfan_visible === 1
                              ? "#FF669E"
                              : "#FFD685",
                          ...tailwind("text-sm font-medium"),
                        }}
                      >
                        元
                      </Text>
                    </View>
                    <View style={tailwind("flex flex-row items-center")}>
                      <Text
                        style={{
                          color:
                            data.is_ironfan_visible === 1
                              ? "#FF669E"
                              : "#FFD685",
                          ...tailwind("text-sm font-medium"),
                        }}
                      >
                        {data.is_ironfanship_unlocked === 1 &&
                          data.is_ironfan_visible === 1 &&
                          "已使用铁粉特权解锁"}
                        {data.is_superfanship_unlocked === 1 &&
                          data.is_ironfan_visible === 0 &&
                          "已使用超粉特权解锁"}
                        {data.is_superfanship_unlocked === 0 &&
                          data.is_ironfanship_unlocked === 0 &&
                          "已付费解锁"}
                      </Text>
                      <Icon
                        type="ionicon"
                        name="chevron-forward"
                        size={16}
                        color={
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"
                        }
                      />
                    </View>
                  </View>
                </TouchableOpacity>
              )}
            {/* 仅对发帖人展示 */}
            {data.c_type === 1 && isCreator && (
              <TouchableOpacity
                activeOpacity={1}
                onPress={() =>
                  navigation.navigate("WebWithoutHeader", {
                    uri:
                      process.env.EXPO_PUBLIC_WEB_URL +
                      "/zone/pay/" +
                      data?.zid +
                      "/h5_zone_moment/" +
                      data?.id,
                  })
                }
                style={{
                  backgroundColor:
                    data.is_ironfan_visible === 1 ? "#301024" : "#331F0B",
                  ...tailwind("flex flex-col py-2.5 px-3 mr-10 rounded-lg"),
                }}
              >
                <View
                  style={tailwind("flex flex-row justify-between items-center")}
                >
                  <View style={tailwind("flex flex-row items-center")}>
                    <NativeImage
                      source={
                        data.is_ironfan_visible === 1
                          ? require("../../assets/icon/others/money_pink.png")
                          : require("../../assets/icon/others/money_gold.png")
                      }
                    />
                    <Text
                      style={{
                        color:
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
                        ...tailwind("text-base font-semibold ml-1"),
                      }}
                    >
                      {data.price / 100}
                    </Text>
                    <Text
                      style={{
                        color:
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
                        ...tailwind("text-sm font-medium"),
                      }}
                    >
                      元
                    </Text>
                  </View>
                  <View style={tailwind("flex flex-row items-center")}>
                    <Text
                      style={{
                        color:
                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
                        ...tailwind("text-sm font-medium"),
                      }}
                    >
                      共{data.buyer_cnt}人购买
                    </Text>
                    <Icon
                      type="ionicon"
                      name="chevron-forward"
                      size={16}
                      color={
                        data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"
                      }
                    />
                  </View>
                </View>
                {data.is_ironfan_visible === 1 && (
                  <Text style={tailwind("text-xs text-[#FFFFFF40] mt-1")}>
                    空间内任意消费满{data.ironfanship_price / 100}即可成为铁粉
                  </Text>
                )}
              </TouchableOpacity>
            )}
            <View
              style={tailwind(
                "flex flex-row items-center justify-between h-8 mt-2"
              )}
            >
              <Text style={tailwind("text-sm font-medium text-[#FFFFFF80]")}>
                {formatTimestamp(data?.ct)}
              </Text>
              <View style={tailwind("flex flex-row items-center")}>
                <TouchableOpacity
                  style={tailwind("flex flex-row items-center")}
                  onPress={handleLike}
                >
                  {like ? (
                    <NativeImage
                      source={require("../../assets/icon/others/thumbup.png")}
                    />
                  ) : (
                    <NativeImage
                      source={require("../../assets/icon/others/notthumbup.png")}
                    />
                  )}
                  <Text
                    style={{
                      color: like ? "#FF669E" : "#FFFFFF80",
                      ...tailwind("text-xs"),
                    }}
                  >
                    {like ? "已赞" : "点赞"}
                  </Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={tailwind("ml-2")}
                  onPress={() =>
                    setOperationModalVisible(!operationModalVisible)
                  }
                >
                  <NativeImage
                    source={require("../../assets/icon/others/gray....png")}
                  />
                  <OperationModal
                    visible={operationModalVisible}
                    setVisible={setOperationModalVisible}
                    data={data}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View style={tailwind("h-[3px] rounded-full mx-4 bg-[#FFFFFF26]")}></View>
    </View>
  );
}

//媒体为图片时展示内容的组件
function ImageDisplay({
  data,
  isCreator,
  isUnlocked,
  visibleRange,
  mediaAmount,
  media,
}) {
  const tailwind = useTailwind();
  const navigation = useNavigation();

  //如果图片数量与服务端图片数量不一致，则填充第一张图片url使数量与服务端数量一致
  const displayMedia = media.concat(
    new Array(mediaAmount - media.length).fill(media[0])
  );

  const { showImageViewer } = useImageViewer();
  const images = displayMedia.map((item) => {
    return { url: item.urls[0] };
  });

  const [isCollapsed, setIsCollapsed] = useState(true);

  if (images.length === 0) return null;

  return (
    <View style={tailwind("flex flex-row flex-wrap")}>
      {displayMedia.map((item, index) => {
        if (index > 8 && isCollapsed) return null;
        return (
          <TouchableOpacity
            activeOpacity={1}
            key={index}
            onPress={() => {
              showImageViewer({
                imageUrls: images,
                index: index,
                lockedStartIndex: isUnlocked ? 999 : visibleRange,
                onPressUnlockBtn: () =>
                  navigation.navigate("WebWithoutHeader", {
                    uri:
                      process.env.EXPO_PUBLIC_WEB_URL +
                      "/zone/pay/" +
                      data?.zid +
                      "/h5_zone_moment/" +
                      data?.id,
                  }),
              });
            }}
            style={
              displayMedia.length > 1
                ? { aspectRatio: 1, ...tailwind("basis-1/3 p-0.5") }
                : {
                    width:
                      displayMedia[0].w < displayMedia[0].h
                        ? (displayMedia[0].w / displayMedia[0].h) * 200
                        : 250,
                    height:
                      displayMedia[0].w < displayMedia[0].h
                        ? 200
                        : (displayMedia[0].h / displayMedia[0].w) * 250,
                  }
            }
          >
            <Image
              style={tailwind("w-full h-full rounded")}
              blurRadius={
                !isUnlocked && visibleRange < index + 1
                  ? Platform.OS === "ios"
                    ? 100
                    : 10
                  : 0
              }
              source={item.urls[0]}
              placeholder={blurhash}
              contentFit="cover"
              contentPosition={
                displayMedia.length === 1 ? "left top" : "center"
              }
              transition={100}
              cachePolicy="disk"
            />
            {isCreator && visibleRange < index + 1 && (
              <View
                style={{
                  marginLeft: 2,
                  marginBottom: 2,
                  borderBottomRightRadius: 4,
                  borderBottomLeftRadius: 4,
                  ...tailwind(
                    "absolute flex flex-row justify-center w-full bottom-0 bg-[#00000080]"
                  ),
                }}
              >
                <Text style={tailwind("text-xs text-white font-medium")}>
                  不可预览
                </Text>
              </View>
            )}
            {index === 8 && isCollapsed && (
              <TouchableOpacity
                activeOpacity={1}
                onPress={() => setIsCollapsed(false)}
                style={{
                  marginLeft: 2,
                  marginTop: 2,
                  ...tailwind(
                    "absolute flex w-full h-full items-center justify-center bg-[#00000099]"
                  ),
                }}
              >
                <Text style={tailwind("text-white text-2xl font-medium")}>
                  +{media.length - 9}
                </Text>
              </TouchableOpacity>
            )}
            {index === media.length - 1 && !isCollapsed && (
              <TouchableOpacity
                activeOpacity={1}
                onPress={() => setIsCollapsed(true)}
                style={{
                  marginLeft: 2,
                  marginTop: 2,
                  ...tailwind(
                    "absolute flex w-full h-full items-center justify-center bg-[#00000099]"
                  ),
                }}
              >
                <Icon
                  type="ionicon"
                  name="chevron-up"
                  size={32}
                  color="white"
                />
              </TouchableOpacity>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

//媒体为视频时展示封面的组件
function PosterDisplay({ isUnlocked, blurCover, media }) {
  const tailwind = useTailwind();

  return (
    <View
      style={{
        width:
          media.cover_w < media.cover_h
            ? (media.cover_w / media.cover_h) * 200
            : 250,
        height:
          media.cover_w < media.cover_h
            ? 200
            : (media.cover_h / media.cover_w) * 250,
      }}
    >
      <Image
        style={tailwind("w-full h-full rounded")}
        blurRadius={
          !isUnlocked && blurCover === 1
            ? Platform.OS === "ios"
              ? 100
              : 10
            : 0
        }
        source={media.cover_urls[0]}
        placeholder={blurhash}
        contentFit="cover"
        transition={100}
        cachePolicy="disk"
      />
      <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>
  );
}

//帖子操作组件
function OperationModal({ visible, setVisible, data }) {
  const tailwind = useTailwind();
  const navigation = useNavigation();

  //拉黑
  const handleBlock = async () => {
    const account = await get("account");
    const subMid = account.mid;
    const objMid = data.mid;
    await block(subMid, objMid);
    setVisible(false);
  };

  //删除
  const handleDelete = async () => {
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    try {
      const base = await baseRequest();
      const signature = await generateSignature({
        id: data.id,
        ...base,
      });
      const _response = await fetch(
        `${apiUrl}/api/zone_moment/delete?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: data.id,
            ...base,
          }),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
      Toast.show({
        type: "success",
        text1: "删除成功，请刷新页面",
        topOffset: 60,
      });
      return;
    } catch (error) {
      console.error(error);
    } finally {
      setVisible(false);
    }
  };

  //置顶
  const handleTop = async () => {
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    try {
      const base = await baseRequest();
      const body = {
        zone_moment_ids: [data.id],
        op_type: data.is_headed ? 0 : 1,
        ...base,
      };
      const signature = await generateSignature(body);
      const _response = await fetch(
        `${apiUrl}/api/zone_moment/head?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(body),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
      Toast.show({
        type: "success",
        text1: "操作成功，请刷新页面查看",
        topOffset: 60,
      });
      return;
    } catch (error) {
      console.error(error);
    } finally {
      setVisible(false);
    }
  };

  //判断是否展示删除、拉黑、举报功能
  const [display, setDisPlay] = useState({
    delete: false,
    top: false,
    block: true,
    feedback: true,
  });
  useEffect(() => {
    const checkAuth = async () => {
      const account = await get("account");
      if (account.mid === data.mid || account.role === 1 || account.role === 2)
        setDisPlay((prev) => {
          return { ...prev, delete: true, top: true };
        });
      if (account.mid === data.mid)
        setDisPlay((prev) => {
          return { ...prev, block: false, feedback: false };
        });
    };
    checkAuth();
  }, []);

  return (
    <Modal
      visible={visible}
      statusBarTranslucent
      transparent={true}
      style={tailwind("flex-1")}
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => setVisible(false)}
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex flex-1 items-center justify-center"),
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={tailwind(
            "flex flex-col p-2 rounded-2xl bg-[#1E1C29] items-center justify-center w-3/4"
          )}
        >
          {display.feedback && (
            <View style={tailwind("flex flex-col w-full items-center")}>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate("MessageDetail", { mid: 1 });
                  setVisible(false);
                }}
                style={tailwind("flex flex-col w-full py-2 items-center")}
              >
                <Text style={tailwind("text-base text-white font-medium")}>
                  举报
                </Text>
              </TouchableOpacity>
              <View
                style={tailwind(
                  "h-[1px] w-full rounded-full mx-4 bg-[#FFFFFF26]"
                )}
              ></View>
            </View>
          )}
          {display.block && (
            <View style={tailwind("flex flex-col w-full items-center")}>
              <TouchableOpacity
                onPress={handleBlock}
                style={tailwind("flex flex-col w-full py-2 items-center")}
              >
                <Text style={tailwind("text-base text-white font-medium")}>
                  拉黑
                </Text>
              </TouchableOpacity>
              <View
                style={tailwind(
                  "h-[1px] w-full rounded-full mx-4 bg-[#FFFFFF26]"
                )}
              ></View>
            </View>
          )}
          {display.top && (
            <View style={tailwind("flex flex-col w-full items-center")}>
              <TouchableOpacity
                onPress={handleTop}
                style={tailwind("flex flex-col w-full py-2 items-center")}
              >
                <Text style={tailwind("text-base text-white font-medium")}>
                  {data.is_headed ? "取消置顶" : "置顶"}
                </Text>
              </TouchableOpacity>
              <View
                style={tailwind(
                  "h-[1px] w-full rounded-full mx-4 bg-[#FFFFFF26]"
                )}
              ></View>
            </View>
          )}
          {display.delete && (
            <View style={tailwind("flex flex-col w-full items-center")}>
              <TouchableOpacity
                onPress={handleDelete}
                style={tailwind("flex flex-col w-full py-2 items-center")}
              >
                <Text style={tailwind("text-base text-white font-medium")}>
                  删除
                </Text>
              </TouchableOpacity>
              <View
                style={tailwind(
                  "h-[1px] w-full rounded-full mx-4 bg-[#FFFFFF26]"
                )}
              ></View>
            </View>
          )}
          <TouchableOpacity
            onPress={() => setVisible(false)}
            style={tailwind("flex flex-col w-full py-2 items-center")}
          >
            <Text style={tailwind("text-base text-white font-medium")}>
              关闭
            </Text>
          </TouchableOpacity>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
}
