import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { b as useState, u as useEffect } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import './chunks/d76d6172.js';
import './kun-icon.js';
import './kun-button-puer.js';

var style = ".kun-link-button-2 {\n  width: 32px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.kun-link-button-1 {\n  position: relative;\n}\n\n.kun-link-button-bubble {\n  position: absolute;\n  top: 44px;\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 4px 14px;\n  background-color: white;\n  z-index: 99;\n}\n\n.kun-link-button-bubble input {\n  margin-right: 10px;\n  outline: 0;\n}\n\n.kun-link-inline {\n  display: inline-flex;\n  align-items: center;\n}\n\n.kun-link-name {\n  margin-right: 16px;\n}\n\n.editor-menu {\n  width: 32px;\n  height: 24px;\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  background-color: rgba(0,0,0,.1);\n}\n\n.kun-link-button {\n  position: absolute;\n  top: 10px;\n  padding: 16px;\n}\n";

const KunLinkButton = () => {
  const [showEdit, setShow] = useState(false);
  const [mySelected] = useProp("mySelected");
  const [myUrl] = useProp("myUrl");
  const [url, setUrl] = useState("");
  useEffect(() => {
    setUrl(myUrl);
  }, [myUrl]);
  const onMyUpdate = useEvent("MyUpdate", {
    composed: true,
    bubbles: true
  });

  const onKey = evt => {
    if (evt.code === "Enter") {
      setShow(false);
      onMyUpdate({
        url
      });
    }
  };

  return h("host", {
    shadowDom: true
  }, h("style", null, style), h("div", {
    className: "kun-link-button-1 kun-link-button-2 "
  }, h("kun-icon", {
    className: mySelected ? "editor-menu" : "",
    iconType: "lianjie",
    iconHeight: 14,
    iconWidth: 14,
    onclick: () => {
      setShow(!showEdit);
    }
  }), showEdit && h("div", {
    className: "kun-link-button-bubble"
  }, !showEdit && h("div", {
    className: "kun-link-inline"
  }, url === "" && h("span", {
    className: "kun-link-name"
  }, "\u6DFB\u52A0\u94FE\u63A5"), url !== "" && h("span", {
    className: "kun-link-name"
  }, "\u66F4\u65B0\u94FE\u63A5"), showEdit ? h("kun-icon", {
    iconType: "close",
    iconWidth: 16,
    iconHeight: 16,
    onclick: () => setShow(false)
  }) : h("kun-icon", {
    iconType: "lianjie",
    iconWidth: 16,
    iconHeight: 16,
    onclick: () => setShow(true)
  })), showEdit && h("div", {
    className: "kun-link-inline"
  }, h("input", {
    name: "url",
    oninput: evt => setUrl(evt.target.value),
    onkeydown: evt => onKey(evt)
  }), h("kun-icon", {
    class: "mr-4",
    iconType: "close",
    iconWidth: 16,
    iconHeight: 16,
    onclick: () => {
      setShow(false);
      onMyUpdate({
        url
      });
    }
  }), h("kun-icon", {
    iconType: "close",
    iconWidth: 16,
    iconHeight: 16,
    onKeyDown: evt => onKey(evt),
    onclick: () => setShow(false)
  })))));
};

KunLinkButton.props = {
  myUrl: {
    type: String,
    value: "",
    reflect: true
  },
  mySelected: {
    type: Boolean,
    value: false,
    reflect: true
  },
  kunLink: {
    type: String,
    value: "kun-link-button",
    reflect: true
  }
};
var kunLinkButton = getComponentOrDefine("kun-link-button", KunLinkButton);

export default kunLinkButton;
//# sourceMappingURL=kun-link-button.js.map
