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

var style = ":host {\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-file-select/kun-file-select.tsx";
const KunFileSelect = () => {
  const [name, setName] = useState("");
  const inputRef = useRef();

  const onMyFileChange = useEvent("MyFileChange", {
    composed: true,
    bubbles: true,
  });

  const setFile = (evt) => {
    const fileInput = evt.target.files[0];
    if (fileInput != null) {
      setName(fileInput.name);
      onMyFileChange(fileInput);
    }
  };

  const onSelect = () => {
    inputRef.current.click();
  };
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}, style)
      , h('div', {
        onclick: onSelect,
        className: "shadow appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline cursor-pointer"          , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}
      
        , name.length === 0 ? "请选择文件" : name
      )
      , h('input', {
        className: "shadow appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline hidden"          ,
        type: "file",
        ref: inputRef,
        onchange: setFile, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 36}}
      )
    )
  );
};

var kunFileSelect = getComponentOrDefine("kun-file-select", KunFileSelect);

export default kunFileSelect;
