import {
  Component, h, useEvent, useProp,
} from "atomico";
import { Maybe } from "purify-ts/es/Maybe";
import style from "./kun-dialog.scss";
import "@caedman/gs/dist/global-style";
import "../kun-button-puer/kun-button-puer";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunDialog: Component = () => {
  const [title] = useProp<string>("kunTitle");
  const [kunWidth] = useProp<number>("kunWidth");

  const [hasButtonProp] = useProp<boolean>("hasButton");
  const hasButton = Maybe.fromNullable(hasButtonProp).orDefault(true);
  const width = Maybe.fromNullable(kunWidth).orDefault(500);
  const [open, setOpen] = useProp<boolean>("open");

  const onClose = useEvent("MyClose", {
    composed: true,
    bubbles: true,
  });
  const close = (): void => {
    setOpen(false);
    onClose({});
  };

  return (
    <host shadowDom>
      <style>{style}</style>
      {
        open && (
        <div class="flex fixed w-screen h-screen kun-dialog-bg top-0 left-0 ">
          <div
            style={{ width: `${width}px` }}
            class="z-10 fixed rounded bg-white overflow-hidden shadow-lg px-4 border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r "
          >
            <div class="flex-row flex justify-between items-center kun-dialog-header">
              <div className="text-3xl">{title}</div>
              <kun-icon iconType="close" onclick={close} iconWidth={18} iconHeight={18} />
            </div>
            <div class="content py-2">
              <slot name="content" />
            </div>
            {
            hasButton && (
            <div className="flex py-4">
              <kun-button-puer needleContent="关闭" onMyClick={close} />
            </div>
            )
          }
          </div>
        </div>
        )
      }
      <global-style />
    </host>
  );
};

KunDialog.props = {
  hasButton: {
    type: Boolean,
  },
  kunWidth: {
    type: Number,
  },
  open: {
    type: Boolean,
  },
  kunTitle: {
    type: String,
  },
};

export default getComponentOrDefine("kun-dialog", KunDialog);
