import { useProp, useRef, useEvent, h } from 'atomico';
import { useHoverHook } from './aync-hook.js';
import 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';
import { C as CONST_SIX_CONFIG } from './chunks/a234fa33.js';
import '@caedman/kit/dist/use-stylesheet';
import 'lazyload-image';
import './kun-image.js';
import { e as execWithSixLoad } from './chunks/19492529.js';
import { r as requestUploadFile1 } from './chunks/237ddcfd.js';

var style = ":host {\n}\n\n.none {\n  display: none;\n}\n\n.image-width {\n  width: 100px;\n}\n\n.image {\n  width: 100px;\n  height: 100px;\n}";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-upload-file/kun-upload-file.tsx";
const KunUploadFile = () => {
  const [hoverRef, isHovered] = useHoverHook();
  const [kunImageUrl, setKunImageUrl] = useProp("kunImageUrl");
  const refLabel = useRef();
  const updateImg = useEvent("MyChange", {
    composed: true,
    bubbles: true,
  });

  const updateImageFile = async (event) => {
    await execWithSixLoad(async () => {
      const file = (event.target ).files[0];
      const formData = new FormData();
      formData.set("file", file);
      const r = await requestUploadFile1(formData);
      const fileName = `${CONST_SIX_CONFIG.FILE_DOMAIN}${r.msg}`;
      updateImg({
        url: r.msg,
      });
      setKunImageUrl(fileName);
    });
  };

  const clk = () => {
    refLabel.current.click();
  };

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}, style)
      , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}}
        , h('div', { class: "flex flex-row image relative"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 44}}
          , 
            kunImageUrl != null && (
              h('img', { src: kunImageUrl, onclick: clk, ref: hoverRef, class: "cursor-pointer", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 47}} )
            )
          
          , 
            kunImageUrl == null && (
            h('div', { class: "w-full w-full flex items-center hover:bg-orange-400 hover:text-white"     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}}
              , h('div', { class: "cursor-pointer text-center mx-auto"  , onclick: clk, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 53}}, "请上传图片")
            )
            )
          
          , 
            isHovered && (
            h('div', { class: "cursor-pointer image-width text-center absolute bg-black-300 text-white bottom-0 mx-auto"       , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 59}}, "上传图片")
            )
          
        )

        , h('input', { type: "file", class: "none", ref: refLabel, id: "asd", onchange: (evt) => updateImageFile(evt), ignore: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 64}} )
      )
    )
  );
};

KunUploadFile.props = {
  kunImageUrl: {
    type: String,
    reflect: true,
  },
};

var kunUploadFile = getComponentOrDefine("kun-upload-file", KunUploadFile);

export default kunUploadFile;
