import services from '@/services';
import { useRequest } from '@umijs/max';
import { useState } from 'react';
import SafetyModal from '../SafetyTips/SafetyModal';
import styles from './index.less';
import InfoItem from './InfoItem';

const WarnInfo = () => {
  const [selectedItem, setSelectedItem] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const { data } = useRequest(services.Information.getArticleList, {
    defaultParams: [
      {
        pushCategoryName: '大屏预警信息发布',
        'category.scopeList': '1',
        attributeList: '3',
        current: '1',
        size: 10,
      },
    ],
  });

  const handleItemClick = (item: any) => {
    setSelectedItem(item);
    setIsModalOpen(true);
  };

  const handleModalClose = () => {
    setIsModalOpen(false);
    setSelectedItem(null);
  };

  return (
    <div className={styles.container}>
      <div className={styles.tag}>预警信息发布</div>
      <div className={styles.content}>
        {data?.records?.map((item: any) => {
          return <InfoItem key={item.id} data={item} onClick={() => handleItemClick(item)} />;
        })}
      </div>

      {selectedItem && (
        <SafetyModal
          data={selectedItem}
          open={isModalOpen}
          onCancel={handleModalClose}
        />
      )}
    </div>
  );
};

export default WarnInfo;
