import {
  Component, h, useEffect, useEvent, useProp, useState,
} from "atomico";
import style from "./kun-link-button.scss";
import "../kun-icon/kun-icon";
import "../kun-button-puer/kun-button-puer";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunLinkButton = () => {
  const [showEdit, setShow] = useState(false);
  const [mySelected] = useProp<boolean>("mySelected");
  const [myUrl] = useProp<string>("myUrl");
  const [url, setUrl] = useState("");

  useEffect(() => {
    setUrl(myUrl);
  }, [myUrl]);

  const onMyUpdate = useEvent("MyUpdate", {
    composed: true,
    bubbles: true,
  });

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

  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="kun-link-button-1 kun-link-button-2 ">
        <kun-icon
          className={mySelected ? "editor-menu" : ""}
          iconType="lianjie"
          iconHeight={14}
          iconWidth={14}
          onclick={() => {
            setShow(!showEdit);
          }}
        />

        {
          showEdit && (
          <div className="kun-link-button-bubble">
            {
                  !showEdit && (
                  <div className="kun-link-inline">
                    {
                          url === "" && (
                          <span className="kun-link-name">
                            添加链接
                          </span>
                          )
                        }
                    {
                          url !== "" && (
                          <span className="kun-link-name">
                            更新链接
                          </span>
                          )
                        }
                    {
                          showEdit ? (
                            <kun-icon iconType="close" iconWidth={16} iconHeight={16} onclick={() => setShow(false)} />
                          ) : (
                            <kun-icon
                              iconType="lianjie"
                              iconWidth={16}
                              iconHeight={16}
                              onclick={() => setShow(true)}
                            />
                          )
                        }
                  </div>
                  )
                }
            {
                  showEdit && (
                  <div className="kun-link-inline">
                    <input name="url" oninput={(evt) => setUrl(evt.target.value)} onkeydown={(evt) => onKey(evt)} />

                    <kun-icon
                      class="mr-4"
                      iconType="close"
                      iconWidth={16}
                      iconHeight={16}
                      onclick={() => {
                        setShow(false);
                        onMyUpdate({
                          url,
                        });
                      }}
                    />
                    <kun-icon
                      iconType="close"
                      iconWidth={16}
                      iconHeight={16}
                      onKeyDown={(evt) => onKey(evt)}
                      onclick={() => setShow(false)}
                    />
                  </div>
                  )
                }
          </div>
          )
        }

      </div>
    </host>
  );
};

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

export default getComponentOrDefine("kun-link-button", KunLinkButton);
