import { useState, useEvent, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';

var style = ":host {\n}\n\n.kun-search-input-button {\n  font-size: 16px;\n  padding: 8px 8px;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-search-input/kun-search-input.tsx";
const KunSearchInput = () => {
  const [value, setValue] = useState("");

  const mySubmitEvent = useEvent("MySubmit", {
    bubbles: true,
    composed: true,
  });
  const changeSetValue = (event) => {
    const a = event.target ;
    setValue(a.value);
  };
  const onEnter = (event) => {
    if (event.code === "Enter") {
      const a = event.target ;
      mySubmitEvent(a.value);
      event.preventDefault();
      event.stopPropagation();
    }
  };

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}, style)
      , h('div', { className: "w-full", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}
        , h('form', { className: "w-full", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 31}}
          , h('div', { className: "flex items-center border-b border-b-2 border-orange-500 py-2"     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 32}}
            , h('input', {
              className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"         ,
              value: value,
              type: "text",
              onkeydown: onEnter,
              placeholder: "搜索一下",
              onchange: changeSetValue,
              'aria-label': "", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
            )

            , h('button', {
              className: "flex-shrink-0 bg-orange-400 hover:bg-orange-500 border-none hover:border-orange-500 text-sm border-4 text-white py-1 px-2 rounded kun-search-input-button"           ,
              onclick: () => mySubmitEvent(value),
              type: "button", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}}
            , "马上搜索"

            )
          )
        )
      )
    )
  );
};

KunSearchInput.props = {
  message: {
    type: String,
    value: "kun-search-input",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunSearchInput = getComponentOrDefine("kun-search-input", KunSearchInput);

export default kunSearchInput;
