import { MouseEvent } from 'react';
import Tool, { Position } from './enums/Tool';
import { mapClientToCanvas } from './utils';

export type Image = {
  imageData: string;
  imgType:"normal"|"background"
};

const _cacheImgs: {
  [any: string]: HTMLImageElement;
} = {};

export const drawImage = (
  item: Image,
  context: CanvasRenderingContext2D,
  pos: Position,
  id: string,
  rerender: () => void,
) => {
  if (!_cacheImgs[id]) {
    fetch(item.imageData)
      .then((res) => res.blob())
      .then((blob) => {
        return new Promise<HTMLImageElement>((resolve, reject) => {
          let img = document.createElement('img');
          img.addEventListener('load', function () {
            resolve(this);
          });
          img.src = URL.createObjectURL(blob);
        });
      })
      .then((imageBitmap) => {
        _cacheImgs[id] = imageBitmap;
        rerender();
      });
  } else {
    const {imgType}=item;
    if(imgType==="background"){
      context.globalCompositeOperation = 'destination-over';
      context.drawImage(_cacheImgs[id], pos.x, pos.y, pos.w, pos.h);
      context.globalCompositeOperation = 'source-over';
    }
   else{
    context.globalCompositeOperation = 'source-over';
    context.drawImage(_cacheImgs[id], pos.x, pos.y, pos.w, pos.h);
   }
  }
};


export const drawBackgroundImage=(
  
)=> (
  item: Image,
  context: CanvasRenderingContext2D,
  pos: Position,
  id: string,
  rerender: () => void,
) => {
  if (!_cacheImgs[id]) {
    fetch(item.imageData)
      .then((res) => res.blob())
      .then((blob) => {
        return new Promise<HTMLImageElement>((resolve, reject) => {
          let img = document.createElement('img');
          img.addEventListener('load', function () {
            resolve(this);
          });
          img.src = URL.createObjectURL(blob);
        });
      })
      .then((imageBitmap) => {
        _cacheImgs[id] = imageBitmap;
        rerender();
      });
  } else {
    context.globalCompositeOperation = 'destination-over';
    context.drawImage(_cacheImgs[id], pos.x, pos.y, pos.w, pos.h);
    context.globalCompositeOperation = 'source-over';
  }
};





export const onImageComplete = (
  data: string,
  canvas: HTMLCanvasElement,
  viewMatrix: number[],
  handleCompleteOperation: (tool?: Tool, data?: Image, pos?: Position) => void,
) => {
  const image = new Image();

  image.onload = () => {
    const { top, left } = canvas.getBoundingClientRect();
    const imageStyle = document.getElementsByClassName(
      'drawing-board-sketchpad-canvas',
    )[0] as HTMLElement;
    // const imageWidth = 90 * 2;
    // const imageHeight = 120 * 2;
    const imageWidth = canvas.offsetWidth;
    const imageHeight = canvas.offsetHeight;
    // const offsetWidth = canvas.offsetWidth;
    // const offsetHeight = canvas.offsetHeight;

    let offsetWidth: number;
    let offsetHeight: number;
    if (imageStyle !== null) {
      offsetWidth = imageStyle.offsetWidth;
      offsetHeight = imageStyle.offsetHeight;
    }

    const pos = mapClientToCanvas(
      {
        clientX: left + (offsetWidth / 2 - imageWidth / 4),
        clientY: top + (offsetHeight / 2 - imageHeight / 4),
      } as MouseEvent<HTMLCanvasElement>,
      canvas,
      viewMatrix,
    );

    const posEnd = mapClientToCanvas(
      {
        clientX: left + (offsetWidth / 2 + imageWidth / 4),
        clientY: top + (offsetHeight / 2 + imageHeight / 4),
      } as MouseEvent<HTMLCanvasElement>,
      canvas,
      viewMatrix,
    );

    const posInfo = {
      x: pos[0],
      y: pos[1],
      w: posEnd[0] - pos[0],
      h: posEnd[1] - pos[1],
    };

    handleCompleteOperation(
      Tool.Image,
      {
        imageData: data,
        imgType:"normal"
      },
      posInfo,
    );
  };

  image.src = data;
};