import { useState, useProp, useRef, useEvent, useEffect, h } from 'atomico';
import 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import '@caedman/gs/dist/global-style';
import './kun-icon.js';
import '@caedman/kit/dist/use-stylesheet';
import 'purify-ts/es/Maybe';
import 'lodash/get';
import { isChildOf } from './kun-dropdown.js';

var style = ".kun-fold-button {\n  position: relative;\n}\n\n.kun-series-item {\n  padding-left: 10px;\n  color: rgb(113, 128, 150);\n  height: 37px;\n  text-align:left;\n  line-height:37px;\n  cursor: pointer;\n  position: relative;\n}\n\n.kun-series-selected {\n  text-align:left;\n  position: relative;\n  background-color: white;\n  height: 37px;\n  line-height:37px;\n  cursor: pointer;\n  border-color: rgb(230, 236, 241);\n  border-width: 1px;\n  border-style: solid;\n  padding-left: 10px;\n}\n\n.fixed-right {\n  z-index: 100;\n  background-color: white;\n  left: 16px;\n  margin-left: 100%;\n  position: absolute;\n  padding: 20px 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: rgb(230, 236, 241);\n  top: -47%;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-fold-button/kun-fold-button.tsx";
const KunFoldButton = () => {
  const [showDialog, setShowDialog] = useState(false);
  const [kunTitle] = useProp("kunTitle");
  const ref = useRef();

  const onMyClick = useEvent("MyClick", {
    composed: true,
    bubbles: true,
  });
  const onClick = (event) => {
    if (showDialog) {
      setShowDialog(false);
    } else {
      setShowDialog(true);
    }
    onMyClick({});
    event.preventDefault();
    event.stopPropagation();
  };

  const clickEventI = (event) => {
    if (
      event.target != null
        && !isChildOf(event.target , ref.current)
    ) {
      if (showDialog) {
        setShowDialog(false);
        event.preventDefault();
      }
    }
  };

  useEffect(() => {
    document.addEventListener("click", clickEventI);
    return () => {
      document.removeEventListener("click", clickEventI);
    };
  }, [showDialog]);

  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}, style)
      , h('div', {
        ref: ref,
        className: "kun-fold-button", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}
      
        , h('div', {
          onclick: (event) => onClick(event),
          className: showDialog ? "kun-series-selected" : "kun-series-item", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 54}}
        
          , kunTitle
        )
        , 
              showDialog && (
              h('div', { className: "fixed-right bg-white" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 62}}
                , h('slot', { name: "content", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 63}} )
              )
              )
          
      )
    )
  );
};

KunFoldButton.props = {
  kunTitle: {
    type: String,
    value: "kun-fold-button",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunFoldButton = getComponentOrDefine("kun-fold-button", KunFoldButton);

export default kunFoldButton;
