import {
  View,
  TouchableOpacity,
  Image as NativeImage,
  Text,
} from "react-native";
import React, { useState, useEffect, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import baseRequest from "../../../utils/baseRequest";
import { generateSignature } from "../../../utils/crypto";
export default function Message({ navigation }) {
  const [data, setData] = useState([]);
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  useEffect(() => {
    getData();
  }, []);
  const getData = async (searchValue) => {
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    try {
      const base = await baseRequest();
      const body = {
        mid: base.b_mid,
        ...base,
      };
      const signature = await generateSignature(body);
      const _response = await fetch(
        `${apiUrl}/api/notification/list_unread_by_mid?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;
      }
      setData(_data.data.list);
      console.log("_data.data.list", _data.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex flex-1 p-4 mt-4"),
      }}
    >
      {/* 广告轮播 */}
      <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>
  );
}