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

var style = ".kun-select {\n  position: relative;\n}\n\n.bubble {\n  top: 38px;\n}\n\n.bubble {\n  padding: 8px 0;\n  background-color: white;\n  border: 2px solid #eaebec; /** #767373; **/\n  border-radius: 5px;\n  color: #333;\n  font: 16px/24px sans-serif;\n  position: absolute;\n  z-index: 9;\n}\n\n.bubble:after,\n.bubble:before {\n  z-index: 10;\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-bottom: 10px solid  white; /** #eee; **/\n  top: -8px;\n  content: '';\n  right: 20%;\n  margin-left: -10px;\n  position: absolute;\n}\n\n.bubble:before {\n  z-index: 10;\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-bottom: 10px solid;\n  border-bottom-color: inherit;\n  top: -10px;\n  margin-left: -10px;\n}\n\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-dropdown/kun-dropdown.tsx"; function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
function isChildOf(child, parent) {
  return parent.contains(child);
}






const KunDropdown = (props) => {
  const [value, setValue] = useProp("value");
  const [optionMapper] = useProp("optionMapper");
  const [width] = useProp("kunWidth");
  const [kunClass] = useProp("kunClass");

  const optionMap = (txt) => (optionMapper == null ? JSON.stringify(txt) : Maybe.encase(() => get(txt, optionMapper)).orDefault("请选择"));
  const [show, setShow] = useState(false);
  const renderString = (v) => Maybe.fromFalsy(v).map(optionMap).orDefault("");

  const selectEvent = useEvent("MySelect", {
    composed: true,
    bubbles: true,
  });

  useEffect(() => {
    setValue(props.value);
  }, [props.value]);

  const ref = useRef();

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

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

  const changeValue = (v, index, e) => {
    setValue(v);
    setShow(false);
    selectEvent(v);
    e.preventDefault();
  };

  const style1 = `
    .kun-dropdown-create {
      border-style: solid;
      border-color: black;
    }
    .select-input {
      line-height: 36px;
    }
    .kun-dropdown-button {
      width: ${_nullishCoalesce(width, () => ( 100))}px;
    }
    .bubble {
      width: ${_nullishCoalesce(width, () => ( 100))}px;
    }
  `;

  useStylesheet(style1, style);
  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 87}}
      , h('div', { className: `kun-select ${_nullishCoalesce(kunClass, () => ( ""))}`, ref: ref, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 88}}
        , h('button', {
          type: "button",
          onclick: (e) => {
            setShow(!show);
            e.preventDefault();
            e.stopPropagation();
          },
          className: " kun-dropdown-button justify-between outline-none focus:outline-none inline-flex py-1 cursor-pointer px-2 rounded border border-gray-200 items-center "             , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 89}}
        
          , h('div', { className: "mr-4 select-input" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 98}}, h('span', { className: "text-sm", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 98}}, renderString(value)))
          , h('kun-icon', { className: `flex-none ${!show ? "transform rotate-180" : ""}`, iconHeight: "14", iconWidth: "14", iconType: "up", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 99}} )
        )
        , 
          show && (
          h('div', { className: "bubble flex flex-col"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 103}}
            , 
                  props.options.map((item, index) => (
                    h('div', {
                      className: "hover:bg-gray-200 cursor-pointer py-2 px-2"   ,
                      key: String(item),
                      onclick: (e) => changeValue(item, index, e), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 106}}
                    
                      , renderString(item)
                    )
                  ))
                
          )
          )
        
      )
      , h('global-style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 119}} )
    )
  );
};

KunDropdown.props = {
  options: {
    type: Array,
  },
  kunClass: {
    type: String,
  },
  kunWidth: {
    type: Number,
  },
  optionMapper: {
    type: Array,
  },
  value: {
    type: Object,
  },
};

var kunDropdown = getComponentOrDefine("kun-dropdown", KunDropdown);

export default kunDropdown;
export { isChildOf };
