dros/src/layouts/StateBar.tsx

import React from 'react';
import { Space, Tooltip } from 'antd';
import Quota from '../pages/security/Quota';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setQuota } from '../states/security/quotaSlice';
import { getQuota } from '../API/security/quotaActions';
import { HddOutlined, WifiOutlined, FireOutlined } from '@ant-design/icons';
import Icon from '@/components/Icon';
import { useAppSelector } from '@/states/store';

// 定义状态类型
interface StatusBarProps {
  diskStatus: 'available' | 'warning' | 'unavailable'; // 磁盘状态
  batteryLevel: number; // 电量（0-100）
  wifiStrength: 0 | 1 | 2 | 3 | 4; // WiFi 信号强度
  heatCapacity: number; // 热容（0-100）
}

// 磁盘状态组件
const DiskStatus: React.FC<{ status: StatusBarProps['diskStatus'] }> = ({
  status,
}) => {
  let color: string;
  let title: string;

  switch (status) {
    case 'available':
      color = 'text-green-500'; // Tailwind 绿色
      title = '磁盘空间充足';
      break;
    case 'warning':
      color = 'text-yellow-500'; // Tailwind 黄色
      title = '磁盘空间警告';
      break;
    case 'unavailable':
      color = 'text-red-500'; // Tailwind 红色
      title = '磁盘不可用';
      break;
    default:
      color = 'text-gray-400';
      title = '未知状态';
  }

  return (
    <Tooltip title={title}>
      <HddOutlined className={`${color} text-[1em]`} />
    </Tooltip>
  );
};

// 电量组件
const BatteryStatus: React.FC<{ level: number }> = ({ level }) => {
  const themeType = useAppSelector((state) => state.theme.themeType);
  const color =
    level <= 20
      ? 'text-red-500'
      : level <= 50
        ? 'text-yellow-500'
        : 'text-green-500';

  return (
    <Tooltip title={`电量: ${level}%`}>
      {/* <BarChartOutlined className={`${color}  h-full`} /> */}

      <Icon
        module="module-device"
        name="battery-full"
        userId="base"
        theme={themeType}
        size="2x"
        state="normal"
        useAntdIcon={false}
        className={`${color}  h-[1em] w-[1em]`}
      />
    </Tooltip>
  );
};

// WiFi 信号组件
const WifiStatus: React.FC<{ strength: StatusBarProps['wifiStrength'] }> = ({
  strength,
}) => {
  const colors = [
    'text-gray-400', // 0格
    'text-red-500', // 1格
    'text-orange-500', // 2格
    'text-yellow-500', // 3格
    'text-green-500', // 4格
  ];
  const title = `WiFi 信号: ${strength} 格`;

  return (
    <Tooltip title={title}>
      <WifiOutlined
        className={`${colors[strength]} ${strength === 0 ? 'scale-75' : 'scale-100'} h-full`}
      />
    </Tooltip>
  );
};

// 热容组件
const HeatCapacityStatus: React.FC<{ capacity: number }> = ({ capacity }) => {
  const color =
    capacity <= 30
      ? 'text-red-500 border-red-500'
      : capacity <= 60
        ? 'text-yellow-500 border-yellow-500'
        : 'text-green-500 border-green-500';

  return (
    <Tooltip title={`热容: ${capacity}%`}>
      {/* 火焰 */}
      <FireOutlined className={`${color}`} />
    </Tooltip>
  );
};

// 主状态栏组件
const StatusBar: React.FC<StatusBarProps> = ({
  diskStatus,
  batteryLevel,
  wifiStrength,
  heatCapacity,
}) => {
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchQuota = async () => {
      try {
        const response = await getQuota();
        dispatch(
          setQuota({
            available: response.data.available,
            total: response.data.total,
          })
        );
      } catch (error) {
        dispatch(
          setQuota({
            available: 0,
            total: 0,
          })
        );
        console.error('Failed to fetch quota:', error);
      }
    };

    fetchQuota();
    const intervalId = setInterval(fetchQuota, 1000);

    return () => clearInterval(intervalId);
  }, [dispatch]);

  return (
    // <div className="flex justify-end p-2">
    <Space className="h-full">
      <Quota />
      <DiskStatus status={diskStatus} />
      <BatteryStatus level={batteryLevel} />
      <WifiStatus strength={wifiStrength} />
      <HeatCapacityStatus capacity={heatCapacity} />
    </Space>
    // </div>
  );
};

export default StatusBar;
export type { StatusBarProps };
export { DiskStatus, BatteryStatus, WifiStatus, HeatCapacityStatus };
export type DiskStatusType = 'available' | 'warning' | 'unavailable';