import { AlarmStatus, AlarmStatusMean } from '../config/detail.config';
import { clearOrAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager';
import { notification, Button, Tag } from 'ant-design-vue';
import { h, onMounted, onUnmounted } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { alarmLevel } from '/@/views/device/list/config/detail.config';
import { RoleEnum } from '/@/enums/roleEnum';
import { usePermission } from '/@/hooks/web/usePermission';
import { useUserStore } from '/@/store/modules/user';

interface UseAlarmNotifyParams {
  alarmNotifyStatus?: AlarmStatus;
  interval?: number;
  color?: string;
  duration?: number;
}

export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
  const {
    alarmNotifyStatus = AlarmStatus.ACTIVE_UN_ACK,
    interval = import.meta.env.VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
    duration = import.meta.env.VITE_ALARM_NOTIFY_DURATION,
    color = 'orange',
  } = params;
  const alarmNotifyStatusMean = AlarmStatusMean[alarmNotifyStatus];

  const handleMarkRead = async (id: string) => {
    try {
      await clearOrAckAlarm(id, false);
    } catch (error) {}
  };

  let timeout: Nullable<NodeJS.Timer> = null;

  const getAlarmLog = async () => {
    try {
      const { items = [] } =
        (await getDeviceAlarm({ status: alarmNotifyStatus, page: 1, pageSize: 10 })) || {};

      if (items.length) {
        const first = items.at(0)!;
        const { deviceName, id, severity } = first;

        let key: Nullable<string> = `open-notify-${id}`;

        const severityMean = alarmLevel(severity);

        notification.open({
          message: '设备告警',
          duration: Number(duration),
          key,
          description: h('div', {}, [
            h('div', { style: { marginRight: '5px' } }, [
              h('span', { style: { marginRight: '5px' } }, '设备:'),
              h('span', {}, `[${deviceName}]`),
            ]),
            h('div', { style: { marginTop: '5px' } }, [
              h('span', { style: { marginRight: '5px' } }, '告警状态:'),
              h(Tag, { color }, () => `${alarmNotifyStatusMean}`),
            ]),
            h('div', { style: { marginTop: '5px' } }, [
              h('span', { style: { marginRight: '5px' } }, '告警级别:'),
              h(Tag, { color: '#f50' }, () => `${severityMean}`),
            ]),
          ]),
          icon: h(ExclamationCircleOutlined, { style: { color: '#faa22d' } }),
          onClose: () => {
            key = null;
          },
          btn: h(
            Button,
            {
              type: 'primary',
              size: 'small',
              onClick: async () => {
                await handleMarkRead(id);
                notification.close(key!);
                key = null;
              },
            },
            () => '标记已读'
          ),
        });
      }
    } catch (error) {}
  };

  const polling = () => {
    timeout = setInterval(() => {
      getAlarmLog();
    }, interval);
  };

  const { hasPermission } = usePermission();

  onMounted(() => {
    const alarmPermissionKey = 'api:alarm:global:notify';
    const hasPermissionRole = [RoleEnum.CUSTOMER_USER, RoleEnum.TENANT_ADMIN];
    const userInfo = useUserStore().getUserInfo;
    const userRoles = userInfo.roles || [];

    const getPermissionFlag = () => {
      for (const item of userRoles) {
        const flag = hasPermissionRole.find((each) => item === each);
        if (flag) return true;
      }
      return false;
    };
    if (hasPermission(alarmPermissionKey) && getPermissionFlag()) polling();
  });

  onUnmounted(() => {
    clearInterval(timeout as NodeJS.Timer);
    timeout = null;
    // currentNotifyId = null;
  });
}