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

const ButtonGroup = Button.Group;

interface ActionBarProps {
  onSave: () => void;
}

const ActionBar: React.FC<ActionBarProps> = ({ onSave }) => {
  const { logBarStatus } = useSelector((state) => state.ideContainer);
  const dispatch = useDispatch();

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

  return (
    <div className="action-bar">
      <Button onClick={onSave} type="primary" shape="round" icon={<IconSave />}>保存</Button>
      <ButtonGroup style={{ marginLeft: 8 }}>
        <Button
          type="outline"
          shape="round"
          icon={<IconPlayArrow />}
          style={{ padding: '0 8px', backgroundColor: '#fff' }}
        >
          运行
        </Button>
        <Button
          type="outline"
          shape="round"
          icon={<IconCodeSquare />}
          style={{ padding: '0 8px', backgroundColor: '#fff' }}
          onClick={() => changeLogBarStatus()}
        >
          日志
        </Button>
      </ButtonGroup>
    </div>
  );
};

export default ActionBar;