import React, { useEffect, useState } from 'react';
import styles from './index.less';
import notificationIcon from '@/assets/images/V-2504/map-notification-bg.png';
import { useMapState } from '../../MapStateContext';
import { useDashboard } from '../../context';
// 导入区域数据和工具函数
import regionTreeResult from '../DistrictMapCustomized/regionTreeResult.json';
import { flattenRegionTree } from '../../../config/commonUtils';

// Define page name mappings
const PAGE_DISPLAY_NAMES: Record<string, string> = {
  'restaurantOil': '餐饮油烟',
  'environment': '环境卫生',
  // 'home': '城市概况',
  // Add other page names as needed
};

// Define which pages support alerts
const PAGES_WITH_ALERTS = ['restaurantOil'];

interface NotificationItem {
  id: string;
  content: string;
}

interface MapNotificationProps {
  districtName?: string;
}

const MapNotification: React.FC<MapNotificationProps> = ({ districtName }) => {
  const [visible, setVisible] = useState(true);
  const [currentIndex, setCurrentIndex] = useState(0);
  const { mapState } = useMapState();
  const { activePage } = useDashboard();
  
  // 创建区域编码到名称的映射
  const [regionNameMap, setRegionNameMap] = useState<Record<string, string>>({});
  
  // 初始化区域名称映射
  useEffect(() => {
    if (regionTreeResult?.data) {
      const mapping = flattenRegionTree(regionTreeResult.data);
      setRegionNameMap(mapping);
    }
  }, []);
  
  // Get current district name from mapState if not provided as prop
  const [currentDistrictName, setCurrentDistrictName] = useState(districtName || '成都市');
  
  // Track the current page display name
  const [currentPageName, setCurrentPageName] = useState('');
  
  // Update district name when regionCode changes
  useEffect(() => {
    if (mapState.regionCode && regionNameMap) {
      // 使用映射获取区域名称
      const districtName = regionNameMap[mapState.regionCode] || '成都市';
      setCurrentDistrictName(districtName);
    }
  }, [mapState.regionCode, regionNameMap]);
  
  // Update page name when activePage changes
  useEffect(() => {
    if (activePage) {
      setCurrentPageName(PAGE_DISPLAY_NAMES[activePage] || '');
    }
  }, [activePage]);
  
  // Generate dynamic notifications based on current page and district
  const notifications = React.useMemo(() => {
    const items: NotificationItem[] = [
      { id: '1', content: `新增一件${currentPageName}事件` },
    ];
    
    // Add alert notification only if the current page supports alerts
    if (PAGES_WITH_ALERTS.includes(activePage)) {
      items.push({ id: '2', content: `新增一次${currentPageName}告警` });
    }
    
    return items;
  }, [currentPageName, activePage]);

  const showTime = 5000; // 显示showTime秒
  const hideTime = 5000; // 隐藏hideTime秒

  useEffect(() => {
    let timer: NodeJS.Timeout;

    const showNotification = () => {
      setVisible(true);
      // showTime后隐藏
      timer = setTimeout(() => {
        setVisible(false);
        // hideTime后显示下一条
        timer = setTimeout(() => {
          setCurrentIndex((prevIndex) => (prevIndex + 1) % notifications.length);
          showNotification();
        }, hideTime);
      }, showTime);
    };

    // 启动第一条通知的显示
    if (notifications.length > 0) {
      showNotification();
    }

    return () => {
      if (timer) {
        clearTimeout(timer);
      }
    };
  }, [notifications]);

  // 如果不可见、没有通知或者是首页，返回null
  if (!visible || notifications.length === 0 || activePage === 'home') {
    return null;
  }

  return (
    <div className={styles.notificationBar}>
      <div className={styles.content}>
        <img src={notificationIcon} className={styles.icon} alt="通知" />
        <span className={styles.district}>{currentDistrictName}</span>
        <span className={styles.message}>{notifications[currentIndex]?.content}</span>
      </div>
    </div>
  );
};

export default MapNotification; 