import React, { useState } from 'react';
import { Button } from '@arco-design/web-react';
import { IconSend, IconOrderedList } from '@arco-design/web-react/icon';
import HistoryVersionModal from './historyVersionModal';
import { Node, Edge } from '@xyflow/react';

interface HandlerBarProps {
  onPublish?: () => void;
  isRunning?: boolean;
  setNodes?: React.Dispatch<React.SetStateAction<Node[]>>;
  setEdges?: React.Dispatch<React.SetStateAction<Edge[]>>;
}

const HandlerBar: React.FC<HandlerBarProps> = ({ onPublish, isRunning, setNodes, setEdges }) => {
  const [historyModalVisible, setHistoryModalVisible] = useState(false);

  const handleHistoryClick = () => {
    setHistoryModalVisible(true);
  };

  const handleApplyHistory = (nodes: Node[], edges: Edge[]) => {
    if (setNodes && setEdges) {
      setNodes(nodes);
      setEdges(edges);
    }
  };

  return (
    <>
      <div className="handlex-bar" style={{ paddingRight: 50 }}>
        <div className="handlex-bar-item">
          <Button
            type="outline"
            shape="round"
            disabled={isRunning}
            style={{ marginRight: 8, padding: '0 8px', backgroundColor: '#fff' }}
            onClick={handleHistoryClick}
          >
            <IconOrderedList />
            历史版本
          </Button>
          <Button
            type="primary"
            shape="round"
            onClick={onPublish}
            disabled={isRunning}
          >
            <IconSend />
            流程发布
          </Button>
        </div>
      </div>

      <HistoryVersionModal
        visible={historyModalVisible}
        onCancel={() => setHistoryModalVisible(false)}
        onApply={handleApplyHistory}
      />
    </>
  );
};

export default HandlerBar;