import { useProp, h } from 'atomico';
import { Option } from 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';
import { useStylesheet } from '@caedman/kit/dist/use-stylesheet';
import 'lazyload-image';

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-image/kun-image.tsx";
const KunImage = () => {
  const [url] = useProp("url");
  const [heightP] = useProp("height");
  const [widthP] = useProp("width");
  const [className] = useProp("cls");

  const height = Option.of(heightP).map((str1) => `${str1}px`).getOrElse("100%");
  const width = Option.of(widthP).map((str1) => `${str1}px`).getOrElse("100%");

  const style1 = `
    .kun-image-avatar {
      --lazy-image-border-radius: 50%;
    }
    
    .kun-custom-image1 {
      width: ${width};
      height: ${height};
      object-fit: fill;
      --lazy-image-fit: fill;
    }
    img[aria-hidden="true"] {
      display: none;
    }
  `;

  useStylesheet(style1);

  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}
      , h('div', { class: "w-full h-full" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}
        , 
          url == null && (
          h('kun-icon', { slot: "placeholder", iconType: "preload-image", iconWidth: widthP, iconHeight: heightP, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 45}} )
          )
        
        , 
          url != null && (
          h('lazy-image', {
            className: `${className} kun-custom-image1`,
            src: url,
            'lazy-image-width': width,
            'lazy-image-height': height,
            lazyImageWidth: width,
            lazyImageHeight: height, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}
          
            , h('kun-icon', { slot: "placeholder", iconType: "preload-image", iconWidth: widthP, iconHeight: heightP, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 58}} )
          )
          )
        
      )
    )
  );
};

KunImage.props = {
  height: {
    type: Number,
  },
  cls: {
    type: String,
  },
  width: {
    type: Number,
  },
  url: {
    type: String,
    reflect: true,
  },
};

var kunImage = getComponentOrDefine("kun-image", KunImage);

export default kunImage;
