/* eslint-disable no-use-before-define */
import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView, FlatList } from 'react-native-gesture-handler';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Constants from 'expo-constants';
import { useTranslation } from 'react-i18next';
import useModel from 'flooks';
import { useMount } from '@umijs/hooks';

import IM from './model.ts';
import User from '../flooks/User';

import NoticeCom from './NoticeCom.tsx';

const NoticeTab = createMaterialTopTabNavigator();

export default function NoticeScreen({ navigation }: StackScreenProps) {
  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 } = useModel(IM, ['sysNoticeList']);
  const { t } = useTranslation();
  return (
    <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>
        );
      }}
    />
  );
}