import { useProp, useEvent, h } from 'atomico';
import 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import '@caedman/gs/dist/global-style';
import './kun-icon.js';
import './kun-button-puer.js';
import { Maybe } from 'purify-ts/es/Maybe';

var style = ":host {\n}\n\n.kun-dialog-bg {\n  z-index: 99;\n  background-color: rgba(0,0,0,.3);\n}\n\n.fixed {\n  width: 300px;\n  position: fixed;\n  margin-left: auto;\n  margin-right: auto;\n  left: 0;\n  right: 0;\n  top: 15%;\n}\n\n.content {\n  min-height: 100px;\n}\n\n.kun-dialog-header {\n  height: 65px;\n  border-bottom-color: rgba(128,128,128,0.27843);\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n}";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-dialog/kun-dialog.tsx";
const KunDialog = () => {
  const [title] = useProp("kunTitle");
  const [kunWidth] = useProp("kunWidth");

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

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

  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}, style)
      , 
        open && (
        h('div', { class: "flex fixed w-screen h-screen kun-dialog-bg top-0 left-0 "       , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
          , h('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 "                  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}}
          
            , h('div', { class: "flex-row flex justify-between items-center kun-dialog-header"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 38}}
              , h('div', { className: "text-3xl", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 39}}, title)
              , h('kun-icon', { iconType: "close", onclick: close, iconWidth: 18, iconHeight: 18, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 40}} )
            )
            , h('div', { class: "content py-2" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}
              , h('slot', { name: "content", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}} )
            )
            , 
            hasButton && (
            h('div', { className: "flex py-4" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 47}}
              , h('kun-button-puer', { needleContent: "关闭", onMyClick: close, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}} )
            )
            )
          
          )
        )
        )
      
      , h('global-style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 56}} )
    )
  );
};

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

var kunDialog = getComponentOrDefine("kun-dialog", KunDialog);

export default kunDialog;
