import React from 'react';
import { Button, Message } from '@arco-design/web-react';
import { IconSave, IconPlayArrow, IconCodeSquare, IconUndo, IconRedo } from '@arco-design/web-react/icon';
import { updateLogBarStatus } from '@/store/ideContainer';
import { useSelector, useDispatch } from 'react-redux';

const ButtonGroup = Button.Group;

interface ActionBarProps {
  useDefault: boolean;
  onSave?: () => void;
  onUndo?: () => void;
  onRedo?: () => void;
  canUndo?: boolean;
  canRedo?: boolean;
  onRun?: (isRunning: boolean) => void;
  isRunning?: boolean;
}

const ActionBar: React.FC<ActionBarProps> = ({
                                               useDefault,
                                               onSave,
                                               onUndo,
                                               onRedo,
                                               canUndo = false,
                                               canRedo = false,
                                               onRun,
                                               isRunning = false
                                             }) => {
  const { logBarStatus, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);
  const dispatch = useDispatch();

  // 辅助函数：获取当前应用/子流程的唯一标识符
  const getCurrentAppKey = () => {
    if (!currentAppData) return null;
    // 如果是子流程（key包含'sub'），使用key作为标识符
    if (currentAppData.key && currentAppData.key.includes('sub')) {
      return currentAppData.key;
    }
    // 否则使用id
    return currentAppData.id;
  };

  // 获取当前应用的运行状态
  const currentAppKey = getCurrentAppKey();
  const currentAppIsRunning = currentAppKey && appRuntimeData[currentAppKey]
    ? appRuntimeData[currentAppKey].isRunning
    : false;

  const changeLogBarStatus = () => {
    dispatch(updateLogBarStatus(!logBarStatus));
  };

  const handleRun = () => {
    onRun?.(!currentAppIsRunning);
  };

  return (
    <div className="action-bar">
      <Button onClick={onSave} type="primary" shape="round" icon={<IconSave />}>保存</Button>
      {useDefault && (
        <>
          <ButtonGroup style={{ marginLeft: 8 }}>
            <Button
              type="outline"
              shape="round"
              icon={<IconPlayArrow />}
              onClick={() => handleRun()}
              style={{ padding: '0 8px', backgroundColor: '#fff' }}
              status={currentAppIsRunning ? 'danger' : undefined}
            >
              {currentAppIsRunning ? '停止' : '运行'}
            </Button>
            <Button
              type="outline"
              shape="round"
              icon={<IconCodeSquare />}
              style={{ padding: '0 8px', backgroundColor: '#fff' }}
              onClick={() => changeLogBarStatus()}
            >
              日志
            </Button>
          </ButtonGroup>
          {/*<ButtonGroup style={{ marginLeft: 15 }}>*/}
          {/*  <Button*/}
          {/*    type="outline"*/}
          {/*    shape="round"*/}
          {/*    icon={<IconUndo />}*/}
          {/*    onClick={onUndo}*/}
          {/*    disabled={!canUndo}*/}
          {/*    status="danger"*/}
          {/*    style={{ padding: '0 8px', backgroundColor: '#fff' }}*/}
          {/*  >*/}
          {/*    撤销*/}
          {/*  </Button>*/}
          {/*  <Button*/}
          {/*    type="outline"*/}
          {/*    shape="round"*/}
          {/*    icon={<IconRedo />}*/}
          {/*    onClick={onRedo}*/}
          {/*    disabled={!canRedo}*/}
          {/*    style={{ padding: '0 8px', backgroundColor: '#fff' }}*/}
          {/*  >*/}
          {/*    重做*/}
          {/*  </Button>*/}
          {/*</ButtonGroup>*/}
        </>
      )}
    </div>
  );
};

export default ActionBar;