import { Button, Divider, Tooltip } from "antd";
import {
  ApartmentOutlined,
  FileImageOutlined,
  SmileOutlined,
  StarOutlined,
  TagOutlined,
} from "@ant-design/icons";
import { useModel } from "umi";
import { insertImage } from "../../mindmapHander";
export default function index() {
  const { rightToobarActive, rightToolbarActive, selectedCell } =
    useModel("mindmap.mindMapModel");
  const {
    setRightOriginalPanelWidth,
    mindmapRightPanelWidth,
    setMindMapRightPanelWidth,
  } = useModel("appModel");

  const handleAddImage = () => {
    insertImage(selectedCell.find((node) => node.isNode()));
  };

  return (
    <div className="absolute top-8px right-8px">
      <div className="bg-white shadow-md m-b-20px rounded-4px flex flex-col p-8px">
        <Tooltip placement="bottom" title="AI助手">
          <Button
            type="text"
            icon={<svg className="icon h-32px w-32px" aria-hidden="true">
              <use xlinkHref="#icon-AI1"></use>
            </svg>}
            // className={rightToobarActive === "ai-chat" ? "active" : ""}
            onClick={() => {
              rightToolbarActive("ai-chat");
              setRightOriginalPanelWidth(mindmapRightPanelWidth);
              if (mindmapRightPanelWidth <= 450) {
                setMindMapRightPanelWidth(450);
              }
            }}
          />
        </Tooltip>
        {/* <Tooltip placement="bottom" title="AI创作">
          <Button
            type="text"
            icon={<svg className="icon h-32px w-32px" aria-hidden="true">
              <use xlinkHref="#icon-AI1"></use>
            </svg>}
            className={rightToobarActive === "ai-creator" ? "active" : ""}
            onClick={() => rightToolbarActive("ai-creator")}
          />
        </Tooltip> */}
      </div>

      <div className="bg-white shadow-md rounded-4px flex flex-col p-8px">
        <Tooltip placement="bottom" title="样式">
          <Button
            type="text"
            icon={<i className="iconfont icon-fenggeyangshi" />}
            className={rightToobarActive === "style" ? "active" : ""}
            onClick={() => rightToolbarActive("style")}
          />
        </Tooltip>
        <Tooltip placement="bottom" title="属性">
          <Button
            type="text"
            icon={<i className="iconfont icon-shuxing-shouqi" />}
            className={rightToobarActive === "attrs" ? "active" : ""}
            onClick={() => rightToolbarActive("attrs")}
          />
        </Tooltip>
        <Tooltip placement="bottom" title="结构">
          <Button
            type="text"
            icon={<ApartmentOutlined />}
            className={rightToobarActive === "structure" ? "active" : ""}
            onClick={() => rightToolbarActive("structure")}
          />
        </Tooltip>
        <Tooltip placement="bottom" title="风格">
          <Button
            type="text"
            icon={<StarOutlined />}
            className={rightToobarActive === "theme" ? "active" : ""}
            onClick={() => rightToolbarActive("theme")}
          />
        </Tooltip>
        <Divider className="my-8px" />
        <Tooltip placement="bottom" title="图标">
          <Button
            type="text"
            disabled={!selectedCell.length}
            icon={<SmileOutlined />}
            className={rightToobarActive === "icon" ? "active" : ""}
            onClick={() => rightToolbarActive("icon")}
          />
        </Tooltip>
        <Tooltip placement="bottom" title="图片">
          <Button
            type="text"
            disabled={!selectedCell.length}
            icon={<FileImageOutlined />}
            onClick={handleAddImage}
          />
        </Tooltip>
        <Tooltip placement="bottom" title="标签">
          <Button
            type="text"
            disabled={!selectedCell.length}
            icon={<TagOutlined />}
            className={rightToobarActive === "tag" ? "active" : ""}
            onClick={() => rightToolbarActive("tag")}
          />
        </Tooltip>
      </div>
    </div>
  );
}
