import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import clsx from 'clsx';
import { Photo, PhotoFail } from '@react-vant/icons';
import Image from './Image';
import { Lazyload } from '../lazyload';
import { COMPONENT_TYPE_KEY } from '../utils/constant';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
export const getLazyImagePlaceholder = bem => _jsx("div", Object.assign({
  className: clsx(bem('loading'))
}, {
  children: _jsx(Photo, {
    className: clsx(bem('loading-icon'))
  })
}));

const LazyImage = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('image', prefixCls);

  const {
    lazyload
  } = props,
        imageProps = __rest(props, ["lazyload"]);

  const renderPlaceholder = () => {
    if (typeof lazyload === 'boolean') return getLazyImagePlaceholder(bem);
    return lazyload.placeholder || getLazyImagePlaceholder(bem);
  };

  if (lazyload) {
    const {
      className,
      style,
      height,
      width
    } = imageProps;
    const attrs = {
      className: clsx(className, bem({
        block: imageProps.block
      })),
      style: Object.assign(Object.assign({}, style), {
        height,
        width
      })
    };
    return _jsx(Lazyload, Object.assign({}, attrs, {
      placeholder: renderPlaceholder()
    }, {
      children: _jsx(Image, Object.assign({}, imageProps))
    }));
  }

  return _jsx(Image, Object.assign({}, imageProps));
};

LazyImage.defaultProps = {
  fit: 'fill',
  errorIcon: _jsx(PhotoFail, {}),
  loadingIcon: _jsx(Photo, {}),
  showError: true,
  showLoading: true,
  block: true
};
export const IMAGE_KEY = Symbol('image');
const ImageNamespace = Object.assign(LazyImage, {
  [COMPONENT_TYPE_KEY]: IMAGE_KEY
});
export default ImageNamespace;