import {
  Component, h, useEvent, useState,
} from "atomico";

import "../../kun-form/kun-form";
import "../../kun-dialog/kun-dialog";
import "../../kun-button-puer/kun-button-puer";
import "../../global-style/global-style";
import { requestParseLink } from "@caedman/seek-api/build/api/req-parse-link";
import execWithLoading from "@caedman/spring/build/execWithLoading";
import { getComponentOrDefine } from "../../../hooks/aync-hook/redirect";
import { execWithSixLoad } from "../../../common/exec-confirm";
import { toastrMessage } from "../extenstions/extensions/exec-toastr";

const mockStyle = `
    .mock {
        
    }
`;
const arrays = [
  {
    label: "Url",
    name: "url",
    formType: "input",
  },
];

export const ImportByLinkDialog = () => {
  const [show, setShow] = useState(false);
  const useEvent1 = useEvent("MySubmit", {
    bubbles: true,
    composed: true,
  });

  const onClick = (): void => {
    console.log("s", show);
    setShow(true);
    console.log("s", show);
  };
  return (
    <host shadowDom>
      <style>{mockStyle}</style>
      <div>
        <span class="cursor-pointer" onclick={() => onClick()}>导入</span>
        {
            show && (
            <kun-dialog
              has-button={false}
              open={show}
              kunTitle="从链接导入"
              kunWidth={500}
              onMyClose={() => setShow(false)}
            >
              <kun-form
                slot="content"
                className="sm:w-7/12"
                fields={arrays}
                parse-form
                submit-text="提交"
                onMySubmit={async (event: CustomEvent) => {
                  await execWithSixLoad(async () => {
                    const data = event.detail.form;
                    const a = await requestParseLink(data.url);
                    if (a.record.title.length !== 0 || a.record.content.length !== 0) {
                      useEvent1(a.record);
                      toastrMessage();
                      setShow(false);
                    } else {
                      toastrMessage("请稍后再试");
                    }
                  });
                }}
              />
              <kun-button-puer needleContent="提交" />
            </kun-dialog>
            )
          }
      </div>
      <global-style />
    </host>
  ) as Component;
};


export default getComponentOrDefine("kun-import-link-dialog-1", ImportByLinkDialog);
