import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Progress, Modal, Button } from 'antd';
import { RootState } from '../../../states/store';

const AcquisitionTracer: React.FC = () => {
  const acquisitionState = useSelector(
    (state: RootState) => state.generatorMonitor.acquisitionState
  );
    const errorMessage = useSelector(
    (state: RootState) => state.generatorMonitor.errorMessage
  );

  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    if (acquisitionState === 1 || acquisitionState === 3) {
      setIsModalOpen(true);
    } else {
      setIsModalOpen(false);
    }
  }, [acquisitionState]);

  const renderProgressBar = () => {
    switch (acquisitionState) {
      case 1:
        return <Progress percent={50} status="active" />;
      case 2:
        return <Progress percent={100} status="success" />;
      case 3:
        return (
          <div>
            <Progress percent={100} status="exception" />
            <p style={{ marginTop: 10 }}>{errorMessage || '采集失败，请检查设备或重试。'}</p>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <Modal
      title="Acquisition Tracer"
      open={isModalOpen}
      footer={acquisitionState === 3 ? [<Button key="ok" onClick={() => setIsModalOpen(false)}>确定</Button>] : null}
      centered
      style={{ top: 20 }}
    >
      <div>{renderProgressBar()}</div>
    </Modal>
  );
};

export default AcquisitionTracer;