import { useEditor } from "@/modules/editor";
import { Button, Dropdown } from "ant-design-vue";
import { defineUI } from "queenjs";
import { ShareBox } from "./ShareBox";

export default defineUI({
  setup() {
    const { store, actions, jumpIndexHtml } = useEditor();
    return () => (
      <div class="flex justify-between">
        <aside>
          <img class="h-40px cursor-pointer" src={require("@/assets/imgs/Logo.png")} alt="logo" onClick={() => jumpIndexHtml()}/>
        </aside>
        {/* <Radio.Group
          value={store.mode}
          onChange={(e) => actions.switchMode(e.target.value)}
        >
          <Radio.Button value={store.isEditPage ? "editPage" : "editComp"}>
            编辑
          </Radio.Button>
          <Radio.Button value="preview">预览</Radio.Button>
        </Radio.Group> */}

        <aside class="space-x-10px">
          {store.isEditPage && (
            <Dropdown
              overlay={<ShareBox />}
              trigger="click"
              placement="bottomRight"
            >
              <Button>分享</Button>
            </Dropdown>
          )}
          <Button type="primary" onClick={() => actions.saveDesign()}>
            保存
          </Button>
        </aside>
      </div>
    );
  },
});
