import {
  DATE_TIME_FORMAT,
  DURATION_POLLING_PRESENTATIONS,
  STATUS_DANGEROUS,
  STATUS_NORMAL,
  STATUS_SOS,
  STATUS_WARNING,
} from '@/utils/format';
import { ProList, ProListMetas } from '@ant-design/pro-components';
import { Badge, theme, Typography } from 'antd';
import moment from 'moment';
import { useRef } from 'react';

const getBadgeLevel = (level: number) => {
  switch (level) {
    case STATUS_NORMAL:
      return <Badge status="success" />;
    case STATUS_WARNING:
      return <Badge status="warning" />;
    case STATUS_DANGEROUS:
      return <Badge status="error" />;
    case STATUS_SOS:
      return <Badge status="error" />;
    default:
      return <Badge status="default" />;
  }
};

interface AlarmTableProps {
  alarmList?: API.Alarm[];
  isLoading?: boolean;
}

export const AlarmTable: React.FC<AlarmTableProps> = ({
  alarmList,
  isLoading,
}) => {
  //   const intl = useIntl();
  const actionRef = useRef();
  const { token } = theme.useToken();
  //   const [messageApi, contextHolder] = message.useMessage();
  //   const [confirmModalVisible, handleConfirmModalVisible] = useState(false);
  //   const [currentRow, setCurrentRow] = useState({});

  const getTitleAlarmColor = (level: number) => {
    switch (level) {
      case STATUS_NORMAL:
        return token.colorSuccess;
      case STATUS_WARNING:
        return token.colorWarning;
      case STATUS_DANGEROUS:
        return token.colorError;
      case STATUS_SOS:
        return token.colorError;
      default:
        return token.colorText;
    }
  };

  const columns: ProListMetas<API.Alarm> = {
    title: {
      dataIndex: 'name',
      render(_, item) {
        return (
          <Typography.Text style={{ color: getTitleAlarmColor(item.level) }}>
            {item.name}
          </Typography.Text>
        );
      },
    },
    avatar: {
      render: (_, item) => getBadgeLevel(item.level),
    },
    description: {
      dataIndex: 'time',
      render: (_, item) => {
        return (
          <>
            <div>{moment.unix(item?.t).format(DATE_TIME_FORMAT)}</div>
          </>
        );
      },
    },
  };

  return (
    <>
      <ProList<API.Alarm>
        bordered
        actionRef={actionRef}
        metas={columns}
        polling={DURATION_POLLING_PRESENTATIONS}
        loading={isLoading}
        dataSource={alarmList}
        search={false}
        dateFormatter="string"
        cardProps={{
          bodyStyle: { paddingInline: 16, paddingBlock: 8 },
        }}
      />
    </>
  );
};