import { useState, useProp, useEffect, useEvent, h } from 'atomico';
import 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.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 _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-link-button/kun-link-button.tsx";
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, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 35}}, style)
      , h('div', { className: "kun-link-button-1 kun-link-button-2 "  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 36}}
        , h('kun-icon', {
          className: mySelected ? "editor-menu" : "",
          iconType: "lianjie",
          iconHeight: 14,
          iconWidth: 14,
          onclick: () => {
            setShow(!showEdit);
          }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 37}}
        )

        , 
          showEdit && (
          h('div', { className: "kun-link-button-bubble", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}
            , 
                  !showEdit && (
                  h('div', { className: "kun-link-inline", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}}
                    , 
                          url === "" && (
                          h('span', { className: "kun-link-name", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 55}}, "添加链接"

                          )
                          )
                        
                    , 
                          url !== "" && (
                          h('span', { className: "kun-link-name", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 62}}, "更新链接"

                          )
                          )
                        
                    , 
                          showEdit ? (
                            h('kun-icon', { iconType: "close", iconWidth: 16, iconHeight: 16, onclick: () => setShow(false), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 69}} )
                          ) : (
                            h('kun-icon', {
                              iconType: "lianjie",
                              iconWidth: 16,
                              iconHeight: 16,
                              onclick: () => setShow(true), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 71}}
                            )
                          )
                        
                  )
                  )
                
            , 
                  showEdit && (
                  h('div', { className: "kun-link-inline", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 84}}
                    , h('input', { name: "url", oninput: (evt) => setUrl(evt.target.value), onkeydown: (evt) => onKey(evt), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 85}} )

                    , h('kun-icon', {
                      class: "mr-4",
                      iconType: "close",
                      iconWidth: 16,
                      iconHeight: 16,
                      onclick: () => {
                        setShow(false);
                        onMyUpdate({
                          url,
                        });
                      }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 87}}
                    )
                    , h('kun-icon', {
                      iconType: "close",
                      iconWidth: 16,
                      iconHeight: 16,
                      onKeyDown: (evt) => onKey(evt),
                      onclick: () => setShow(false), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 99}}
                    )
                  )
                  )
                
          )
          )
        

      )
    )
  );
};

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;
