import { useState, useHost, useEffect, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon-close.js';
import './kun-search-input.js';

var style = ":host {\n}\n\n.search {\n  position: fixed;\n  top: 56px;\n  left: 0;\n  background-color: #fffaf0;\n  z-index: 999;\n  width: 100%;\n  height: calc(100vh - 56px);\n}\n\n.position-right {\n}";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-search-page/kun-search-page.tsx";
const KunSearchPage = ({ content }) => {
  const [show, setShow] = useState(false);

  const setShowEvent = (event) => {
    if (event.key === "Escape") {
      setShow(false);
      event.preventDefault();
    }
  };
  const host = useHost();
  useEffect(() => {
    host.current.addEventListener("keydown", setShowEvent);
    return () => {
      host.current.removeEventListener("keydown", setShowEvent);
    };
  });
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}, style)
      , h('div', { onclick: () => setShow(true), role: "presentation", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}
        , h('button', { type: "button", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}, content)
      )
      , 
        show && (
        h('div', { className: "search w-full flex flex-col relative"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
          , h('kun-icon-close', { onclick: () => setShow(false), className: " right-0 absolute p-4"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}} )
          , h('div', { className: "mt-20  w-full flex justify-center "     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 35}}
            , h('kun-search-input', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 36}} )
          )
        )
        )
      
    )
  );
};

KunSearchPage.props = {
  content: {
    type: String,
    value: "Search",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunSearchPage = getComponentOrDefine("kun-search-page", KunSearchPage);

export default kunSearchPage;
