import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { useFocusEffect } from '@react-navigation/native';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView, FlatList } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Constants from 'expo-constants';

import useModel from 'flooks';
import { useMount } from 'ahooks';

import { RootStackParamList } from '../types';
import IM from './model';
import User from '../stores/User';

import { useTranslation } from 'react-i18next';

import NoticeCom from './NoticeCom';
import { SoundPlay } from '../utils/SoundUtils';

const NoticeTab = createMaterialTopTabNavigator();

export default function NoticeScreen({
  navigation,
}: StackScreenProps<RootStackParamList, 'Login'>) {
  const { t } = useTranslation();
  const webRef = React.useRef();
  const { initChat } = useModel(IM, []);

  useFocusEffect(
    React.useCallback(() => {
      initChat();
    }, [])
  );
  return (
    <Div bg="gray100" flex={1}>
      <Div bg="yellow500" pt={Constants.statusBarHeight + 11} pb={11}>
        <Text color="white" textAlign="center" fontSize="xl" fontWeight="bold">
          {t('xiao-xi-zhong-xin')}
        </Text>
      </Div>
      <NoticeTab.Navigator
        initialRouteName="Sys"
        style={{ flexGrow: 1 }}
        tabBarOptions={{
          inactiveTintColor: '#000',
          activeTintColor: '#FFC21C',
          indicatorStyle: { height: 0 },
          labelStyle: { fontSize: 15 },
          style: {
            backgroundColor: '#f2f2f2',
            elevation: 0,
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowOpacity: 0,
            shadowRadius: 0,
          },
        }}
      >
        <NoticeTab.Screen
          name="Sys"
          component={SysNoticeScreen}
          options={{
            title: t('xi-tong-xiao-xi'),
          }}
        />
        <NoticeTab.Screen
          name="Chat"
          component={UserChatScreen}
          options={{
            title: t('yong-hu-xiao-xi'),
          }}
        />
      </NoticeTab.Navigator>
    </Div>
  );
}

function SysNoticeScreen({ navigation }) {
  const { sysNoticeList, sendPushNotification } = useModel(IM, [
    'sysNoticeList',
  ]);
  const { t } = useTranslation();
  return (
    <>
      {/* <Button
        onPress={() => {
          sendPushNotification();
          SoundPlay('voice_664');
        }}
      >
        发送系统消息
      </Button> */}
      <FlatList
        renderItem={({ item }) => {
          return (
            <NoticeCom
              info={item}
              type="email"
              onPress={() => {
                navigation.navigate('NoticeStack', {
                  screen: 'EmailDetail',
                  params: {
                    emailId: item.id,
                  },
                });
              }}
            />
          );
        }}
        data={sysNoticeList}
        keyExtractor={(item, index) => `email${index}`}
        ListEmptyComponent={() => {
          return (
            <Text color="gary200" fontSize="sm" textAlign="center" py={20}>
              {t('zan-wu-shu-ju')}
            </Text>
          );
        }}
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#fff' }}
      />
    </>
  );
}

function UserChatScreen({ navigation }) {
  const { chatList } = useModel(IM, ['chatList']);
  const { id } = useModel(User, ['id']);
  const { t } = useTranslation();
  return (
    <FlatList
      renderItem={({ item }) => {
        const isReceive = item.receiveUserId === id;
        const toUserId = isReceive ? item.sendUserId : item.receiveUserId;
        const toUserName = isReceive ? item.sendNickname : item.receiveNickname;
        return (
          <NoticeCom
            info={item}
            userId={id}
            type="user"
            toUserName={toUserName}
            onPress={() => {
              navigation.navigate('NoticeStack', {
                screen: 'Chat',
                params: {
                  toUserId,
                  toUserName,
                },
              });
            }}
          />
        );
      }}
      data={chatList}
      keyExtractor={(item, index) => `chat${index}`}
      contentContainerStyle={{ flexGrow: 1, backgroundColor: '#fff' }}
      ListEmptyComponent={() => {
        return (
          <Text color="gary200" fontSize="sm" textAlign="center" py={20}>
            {t('zan-wu-shu-ju')}
          </Text>
        );
      }}
    />
  );
}