import {
  View,
  TouchableOpacity,
  Image as NativeImage,
  Text,
  Animated,
  useWindowDimensions,
} from "react-native";
import React, { useState, useRef, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Badge } from "@rneui/themed";
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
import MessageList from "../components/MessageList";
export default function NoticeNav({ navigation }) {
  const [data, setData] = useState([]);
  const [openNotices, setOpenNotices] = useState(false);
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const mesListEl = useRef(null);

  //tab组件相关
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);
  const [routes] = useState([{ key: "list", title: "消息" }]);
  const renderScene = useCallback(
    SceneMap({
      list: () => <MessageList navigation={navigation} ref={mesListEl} />,
    }),
    []
  );
  const handleReadAll = useCallback(() => {
    mesListEl.current.readAllMsg();
  }, []);
  const renderIndicator = useCallback((props) => {
    const { position, navigationState, getTabWidth } = props;
    const inputRange = [0, 1];
    const translateX = position.interpolate({
      inputRange: inputRange,
      outputRange: inputRange.map((x) => {
        return x * getTabWidth(navigationState.index);
      }),
    });
    return (
      <Animated.View
        style={{
          width: `${100 / navigationState.routes.length}%`,
          transform: [
            {
              translateX,
            },
          ],
          paddingBottom: 5,
          ...tailwind("flex flex-1 items-center justify-end"),
        }}
      >
        <NativeImage
          source={require("../../../assets/icon/others/tabindicator.png")}
        />
      </Animated.View>
    );
  }, []);
  const renderTabBar = useCallback(
    (props) => (
      <View style={tailwind("flex flex-row items-center")}>
        <TabBar
          {...props}
          activeColor="#FFFFFF"
          inactiveColor="#FFFFFF80"
          style={tailwind("bg-transparent flex-1")}
          labelStyle={tailwind("text-2xl font-medium")}
          tabStyle={{ width: "auto" }}
          renderIndicator={renderIndicator}
        />
        <View style={tailwind("flex-row items-center")}>
          <TouchableOpacity
            style={tailwind(
              "flex items-center justify-center w-9 h-9 mr-4 bg-[#FFFFFF1A] rounded-full"
            )}
            onPress={() => navigation.navigate("Search")}
          >
            <NativeImage
              source={require("../../../assets/icon/32DP/search.png")}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={tailwind(
              "flex items-center justify-center w-9 h-9 mr-4 bg-[#FFFFFF1A] rounded-full"
            )}
            onPress={handleReadAll}
          >
            <NativeImage
              source={require("../../../assets/icon/32DP/remove.png")}
            />
          </TouchableOpacity>
        </View>
      </View>
    ),
    []
  );
  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex flex-1"),
      }}
    >
      <TabView
        navigationState={{ index, routes }}
        swipeEnabled={true}
        renderScene={renderScene}
        renderTabBar={renderTabBar}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
    </View>
    // <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>
  );
}

const MessageItem = ({
  title,
  newestContent,
  time,
  count,
  backgroundColor,
  paddingVertical,
  navigation,
  badge,
  icon,
}) => {
  const tailwind = useTailwind();
  return (
    <View
      style={{
        ...tailwind("flex flex-row items-center mb-2 rounded-xl"),
        backgroundColor,
        paddingVertical,
      }}
    >
      <View style={tailwind("px-4")}>
        <NativeImage style={{ width: 28, height: 29 }} source={icon} />
      </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"),
                maxWidth: 190,
              }}
              numberOfLines={1}
            >
              {title}
            </Text>
            {badge && (
              <View
                style={{
                  ...tailwind("font-medium mr-2 px-1 rounded-full"),
                  backgroundColor: "#ffffff6d",
                }}
              >
                <Text style={tailwind("text-xs text-white")}>{badge}</Text>
              </View>
            )}
          </View>
          <Text
            style={{
              ...tailwind("text-xs"),
              color: "#ffffff6d",
              maxWidth: 220,
              // overflow: "hidden",
            }}
            numberOfLines={1}
          >
            {newestContent}
          </Text>
        </View>
        <View
          style={{
            ...tailwind("w-12 flex flex-col items-start"),
            width: 60,
          }}
        >
          <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
            {time}
          </Text>
          <Badge
            value={count}
            status="error"
            badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
          />
        </View>
      </View>
    </View>
  );
};