import { defineComponent, computed, shallowRef, watchEffect, watch, createVNode, Fragment } from 'vue';
import { qrcodeCanvasProps } from './props.mjs';
import { DEFAULT_SIZE, DEFAULT_LEVEL, DEFAULT_BGCOLOR, DEFAULT_FGCOLOR, DEFAULT_INCLUDEMARGIN, ERROR_LEVEL_MAP } from './constant.mjs';
import qrcodegen from './qrcodegen.mjs';
import { getMarginSize, getImageSettings, excavateModules, SUPPORTS_PATH2D, generatePath } from './util.mjs';

var QRCodeCanvas = /* @__PURE__ */ defineComponent({
  name: "QRCodeCanvas",
  inheritAttrs: false,
  props: qrcodeCanvasProps(),
  setup(props, {
    attrs,
    expose
  }) {
    const imgSrc = computed(() => {
      var _a;
      return (_a = props.imageSettings) == null ? void 0 : _a.src;
    });
    const _canvas = shallowRef(null);
    const _image = shallowRef(null);
    const isImgLoaded = shallowRef(false);
    expose({
      toDataURL: (type, quality) => {
        var _a;
        return (_a = _canvas.value) == null ? void 0 : _a.toDataURL(type, quality);
      }
    });
    watchEffect(() => {
      const {
        value,
        size = DEFAULT_SIZE,
        level = DEFAULT_LEVEL,
        bgColor = DEFAULT_BGCOLOR,
        fgColor = DEFAULT_FGCOLOR,
        includeMargin = DEFAULT_INCLUDEMARGIN,
        marginSize,
        imageSettings
      } = props;
      if (_canvas.value != null) {
        const canvas = _canvas.value;
        const ctx = canvas.getContext("2d");
        if (!ctx)
          return;
        let cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
        const margin = getMarginSize(includeMargin, marginSize);
        const numCells = cells.length + margin * 2;
        const calculatedImageSettings = getImageSettings(cells, size, margin, imageSettings);
        const image = _image.value;
        const haveImageToRender = isImgLoaded.value && calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
        if (haveImageToRender) {
          if (calculatedImageSettings.excavation != null)
            cells = excavateModules(cells, calculatedImageSettings.excavation);
        }
        const pixelRatio = window.devicePixelRatio || 1;
        canvas.height = canvas.width = size * pixelRatio;
        const scale = size / numCells * pixelRatio;
        ctx.scale(scale, scale);
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, numCells, numCells);
        ctx.fillStyle = fgColor;
        if (SUPPORTS_PATH2D) {
          ctx.fill(new Path2D(generatePath(cells, margin)));
        } else {
          cells.forEach((row, rdx) => {
            row.forEach((cell, cdx) => {
              if (cell)
                ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
            });
          });
        }
        if (haveImageToRender) {
          ctx.drawImage(image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
        }
      }
    }, {
      flush: "post"
    });
    watch(imgSrc, () => {
      isImgLoaded.value = false;
    });
    return () => {
      var _a;
      const size = (_a = props.size) != null ? _a : DEFAULT_SIZE;
      const canvasStyle = {
        height: `${size}px`,
        width: `${size}px`
      };
      let img = null;
      if (imgSrc.value != null) {
        img = createVNode("img", {
          "src": imgSrc.value,
          "key": imgSrc.value,
          "style": {
            display: "none"
          },
          "onLoad": () => {
            isImgLoaded.value = true;
          },
          "ref": _image
        }, null);
      }
      return createVNode(Fragment, null, [createVNode("canvas", {
        ...attrs,
        "style": [canvasStyle, attrs.style],
        "ref": _canvas
      }, null), img]);
    };
  }
});

export { QRCodeCanvas as default };
//# sourceMappingURL=Canvas.mjs.map
