import { spread, insert, createComponent, memo, effect, setAttribute, className, style, template } from 'solid-js/web';
import { mergeProps, Switch, Match } from 'solid-js';
import { OriginComponent, atom, extendsEvent } from '@cn-ui/use';
import { Box, Icon } from '@cn-ui/core';
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

const _tmpl$ = /*#__PURE__*/template(`<span></span>`, 2),
      _tmpl$2 = /*#__PURE__*/template(`<img loading="lazy" class="m-auto h-full ">`, 1);
const Image = OriginComponent(props => {
  props = mergeProps({
    alt: 'This is an Image',
    fit: 'cover',
    showError: true,
    showLoading: true,
    iconSize: '1.5em'
  }, props);
  const error = atom(false);
  const loading = atom(true);
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    insert(_el$, createComponent(Switch, {
      get children() {
        return [createComponent(Match, {
          get when() {
            return memo(() => !!props.showLoading, true)() && loading();
          },

          get children() {
            return createComponent(Box, {
              get icon() {
                return createComponent(Icon, {
                  name: "refresh",
                  spin: true,

                  get size() {
                    return props.iconSize;
                  }

                });
              },

              subTitle: "加载中"
            });
          }

        }), createComponent(Match, {
          get when() {
            return memo(() => !!props.showError, true)() && error();
          },

          get children() {
            return createComponent(Box, {
              get icon() {
                return createComponent(Icon, {
                  name: "error",

                  get size() {
                    return props.iconSize;
                  }

                });
              },

              subTitle: "图片加载错误"
            });
          }

        })];
      }

    }), null);

    insert(_el$, (() => {
      const _c$ = memo(() => !!!error(), true);

      return () => _c$() && (() => {
        const _el$2 = _tmpl$2.cloneNode(true);

        _el$2.addEventListener("error", () => {
          loading(false);
          error(true);
        });

        _el$2.addEventListener("load", () => loading(false));

        effect(_p$ => {
          const _v$6 = props.src,
                _v$7 = props.fit,
                _v$8 = props.position;
          _v$6 !== _p$._v$6 && setAttribute(_el$2, "src", _p$._v$6 = _v$6);
          _v$7 !== _p$._v$7 && _el$2.style.setProperty("object-fit", _p$._v$7 = _v$7);
          _v$8 !== _p$._v$8 && _el$2.style.setProperty("object-position", _p$._v$8 = _v$8);
          return _p$;
        }, {
          _v$6: undefined,
          _v$7: undefined,
          _v$8: undefined
        });

        return _el$2;
      })();
    })(), null);

    effect(_p$ => {
      const _v$ = props.class('cn-image align-bottom'),
            _v$2 = !!props.round,
            _v$3 = !!loading(),
            _v$4 = !!error(),
            _v$5 = {
        display: props.block ? 'block' : 'inline-block',
        height: props.height + 'px',
        width: props.width + 'px',
        ...props.style
      };

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _v$2 !== _p$._v$2 && _el$.classList.toggle("round", _p$._v$2 = _v$2);
      _v$3 !== _p$._v$3 && _el$.classList.toggle("loading", _p$._v$3 = _v$3);
      _v$4 !== _p$._v$4 && _el$.classList.toggle("error", _p$._v$4 = _v$4);
      _p$._v$5 = style(_el$, _v$5, _p$._v$5);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined,
      _v$4: undefined,
      _v$5: undefined
    });

    return _el$;
  })();
});

// You should import the CSS file.
const useViewer = props => {
  let images = [];
  /**
   * ! 别问，问就是黑魔法
   */

  let fakeDom = document.createElement('div');
  /** @ts-ignore */

  fakeDom.querySelectorAll = () => images;

  const createViewer = () => {
    return new Viewer(fakeDom, props);
  };

  let viewer = createViewer();

  const dataToImg = i => {
    const img = document.createElement('img');
    return Object.assign(img, i);
  };

  return {
    addImages(image) {
      images = images.concat(image.map(dataToImg));
      viewer.update();
    },

    replaceImages(newImages) {
      images = newImages.map(dataToImg);
      viewer.update();
    },

    getViewer() {
      return viewer;
    }

  };
};

export { Image, useViewer };
