import {
  View,
  TouchableOpacity,
  Image as NativeImage,
  Text,
} from "react-native";
import React, { useState, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function Message({ navigation }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex flex-1"),
      }}
    >
      {/* 广告轮播 */}
      <View></View>
      {/* 官方消息 */}
      <View
        style={{
          ...tailwind("flex flex-col rounded-2xl mt-3.5 border-2"),
          // backgroundColor: "#ffffff6d",
        }}
      >
        <TouchableOpacity
          onPress={() => navigation.navigate("SystemNotice")}
          style={{
            ...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
            backgroundColor: "#ffffff1a",
          }}
        >
          <View style={tailwind("px-4")}>
            <NativeImage
              source={require("../../../assets/icon/32DP/contact.png")}
            />
          </View>
          <View
            style={tailwind(
              "flex flex-row justify-between items-center flex-1"
            )}
          >
            <View style={tailwind("flex flex-col")}>
              <View style={tailwind("flex flex-row items-center mb-2")}>
                <Text
                  style={tailwind("text-base text-white  font-medium mr-2")}
                >
                  系统通知
                </Text>
                <View
                  style={{
                    ...tailwind("font-medium mr-2 px-1 rounded-full"),
                    backgroundColor: "#ffffff6d",
                  }}
                >
                  <Text style={tailwind("text-xs text-white")}>官方</Text>
                </View>
              </View>
              <Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
                官方消息通知
              </Text>
            </View>
            <View style={{ ...tailwind("w-12"), width: 60 }}>
              <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
                11:00
              </Text>
              <View
                style={{
                  ...tailwind("rounded-full bg-[#FF669E]"),
                  width: 20,
                  height: 20,
                }}
              >
                <Text
                  style={{
                    ...tailwind("text-white font-medium"),
                    flexWrap: "nowrap",
                    lineHeight: 20,
                    textAlign: "center",
                  }}
                  numberOfLines={1}
                >
                  1
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => navigation.navigate("ActiveNotice")}
          style={{
            ...tailwind("flex flex-row items-center py-4 rounded-xl"),
            backgroundColor: "#ffffff1a",
          }}
        >
          <View style={tailwind("px-4")}>
            <NativeImage
              source={require("../../../assets/icon/32DP/contact.png")}
            />
          </View>
          <View
            style={tailwind(
              "flex flex-row justify-between items-center flex-1"
            )}
          >
            <View style={tailwind("flex flex-col")}>
              <View style={tailwind("flex flex-row items-center mb-2")}>
                <Text style={tailwind("text-base text-white font-medium mr-2")}>
                  活动消息
                </Text>
                <View
                  style={{
                    ...tailwind("font-medium mr-2 px-1 rounded-full"),
                    backgroundColor: "#ffffff6d",
                  }}
                >
                  <Text style={tailwind("text-xs text-white")}>官方</Text>
                </View>
              </View>
              <Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
                展示相关活动推送信息
              </Text>
            </View>
            <View style={{ ...tailwind("w-12"), width: 60 }}>
              <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
                11:00
              </Text>
              <View
                style={{
                  ...tailwind("rounded-full bg-[#FF669E]"),
                  width: 20,
                  height: 20,
                }}
              >
                <Text
                  style={{
                    ...tailwind("text-white font-medium"),
                    flexWrap: "nowrap",
                    lineHeight: 20,
                    textAlign: "center",
                  }}
                  numberOfLines={1}
                >
                  99
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
      </View>
      {/* 私聊消息 */}
      <View
        style={{
          ...tailwind("flex flex-col rounded-2xl mt-3.5 border-2"),
        }}
      >
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("MessageDetail", {
              mid: 1,
            })
          }
          style={{
            ...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
            backgroundColor: "#333333",
          }}
        >
          <View style={tailwind("px-4")}>
            <NativeImage
              source={require("../../../assets/icon/32DP/contact.png")}
            />
          </View>
          <View
            style={tailwind(
              "flex flex-row justify-between items-center flex-1"
            )}
          >
            <View style={tailwind("flex flex-col")}>
              <View style={tailwind("flex flex-row items-center mb-2")}>
                <Text
                  style={tailwind("text-base text-white  font-medium mr-2")}
                >
                  铁粉空间官网
                </Text>
                <View
                  style={{
                    ...tailwind("font-medium mr-2 px-1 rounded-full"),
                    backgroundColor: "#ffffff6d",
                  }}
                >
                  <Text style={tailwind("text-xs text-white")}>官方客服</Text>
                </View>
              </View>
              <Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
                请回复您的相关消息
              </Text>
            </View>
            <View style={{ ...tailwind("w-12"), width: 60 }}>
              <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
                11:00
              </Text>
              <View
                style={{
                  ...tailwind("rounded-full bg-[#FF669E]"),
                  width: 20,
                  height: 20,
                }}
              >
                <Text
                  style={{
                    ...tailwind("text-white font-medium"),
                    flexWrap: "nowrap",
                    lineHeight: 20,
                    textAlign: "center",
                  }}
                  numberOfLines={1}
                >
                  1
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
}