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 { requestGetPageTitle } from "@caedman/seek-api/build/api/get-api";
import { getComponentOrDefine } from "../../../hooks/aync-hook/redirect";
import { execWithSixLoad } from "../../../common/exec-confirm";
import { retUrlTitle } from "../req-upload-file";

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

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

  const onClick = (): void => {
    setShow(true);
  };

  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) => {
                          console.log("subbbbbbbbbbbb");
                          const data = event.detail.form;
                          if (show) {
                            setShow(false);
                            const { msg: title } = await requestGetPageTitle(data.url);
                            useEvent1({
                              title,
                              url: data.url,
                            });
                          }

                          event.preventDefault();
                        }}
                      />
                      <kun-button-puer needleContent="提交" />
                    </kun-dialog>
                    )
                }
      </div>
      <global-style />
    </host>
    ) as Component;
};


export default getComponentOrDefine("kun-import-url-dialog", ImportUrlDialog);
