import { types } from "mobx-state-tree";

import Utils from "../utils";
import throttle from "lodash/throttle";
import { MIN_SIZE } from "../tools/Base";
import { FF_DEV_3391, FF_DEV_3793, isFF } from "../utils/feature-flags";
import { ff } from "@humansignal/core";
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from "../components/ImageView/Image";

const DrawingTool = types
  .model("DrawingTool", {
    default: true,
    mode: types.optional(types.enumeration(["drawing", "viewing"]), "viewing"),
    unselectRegionOnToolChange: true,
    isDrawingTool: true,
  })
  .volatile(() => {
    return {
      currentArea: null,
    };
  })
  .views((self) => {
    return {
      createRegionOptions(opts) {
        return {
          ...opts,
          coordstype: "px",
        };
      },
      get tagTypes() {
        console.error("Drawing tool model needs to implement tagTypes getter in views");
        return {};
      },
      isIncorrectControl() {
        return self.tagTypes.stateTypes === self.control.type && !self.control.isSelected;
      },
      isIncorrectLabel() {
        return !self.obj.checkLabels();
      },
      get isDrawing() {
        return self.mode === "drawing";
      },
      get getActiveShape() {
        return self.currentArea;
      },
      getCurrentArea() {
        return self.currentArea;
      },
      current() {
        return self.currentArea;
      },
      canStart() {
        return !self.isDrawing && !self.annotation.isReadOnly();
      },
      get defaultDimensions() {
        console.warn("Drawing tool model needs to implement defaultDimentions getter in views");
        return {};
      },
      get MIN_SIZE() {
        if (isFF(FF_DEV_3793)) {
          return {
            X: (MIN_SIZE.X / self.obj.stageScale / self.obj.stageWidth) * RELATIVE_STAGE_WIDTH,
            Y: (MIN_SIZE.Y / self.obj.stageScale / self.obj.stageHeight) * RELATIVE_STAGE_HEIGHT,
          };
        }

        return {
          X: MIN_SIZE.X / self.obj.stageScale,
          Y: MIN_SIZE.Y / self.obj.stageScale,
        };
      },
      /**
       * Determines if an interaction is allowed based on the current context and event properties.
       *
       * @param {Object} ev - The event object containing details about the interaction.
       * @return {boolean} Returns true if the interaction is allowed, otherwise false.
       */
      isAllowedInteraction(ev) {
        if (isFF(FF_DEV_3391) && !self.annotation.editable) {
          return false;
        }
        if (self.group !== "segmentation") return true;
        if (ev.offsetX > self.obj.canvasSize.width) return false;
        if (ev.offsetY > self.obj.canvasSize.height) return false;
        return true;
      },
    };
  })
  .actions((self) => {
    let lastClick = {
      ts: 0,
      x: 0,
      y: 0,
    };

    return {
      event(name, ev, [x, y, canvasX, canvasY]) {
        // filter right clicks and middle clicks and shift pressed
        if (ev.button > 0 || ev.shiftKey) return;
        let fn = `${name}Ev`;

        if (typeof self[fn] !== "undefined") self[fn].call(self, ev, [x, y], [canvasX, canvasY]);

        // Emulating of dblclick event, 'cause redrawing will crush the the original one
        if (name === "click") {
          const ts = ev.timeStamp;

          if (ts - lastClick.ts < 300 && self.comparePointsWithThreshold(lastClick, { x, y })) {
            fn = `dbl${fn}`;
            if (typeof self[fn] !== "undefined") self[fn].call(self, ev, [x, y], [canvasX, canvasY]);
          }
          lastClick = { ts, x, y };
        }
      },

      comparePointsWithThreshold(p1, p2, threshold = { x: self.MIN_SIZE.X, y: self.MIN_SIZE.Y }) {
        if (!p1 || !p2) return;
        if (typeof threshold === "number") threshold = { x: threshold, y: threshold };
        return Math.abs(p1.x - p2.x) < threshold.x && Math.abs(p1.y - p2.y) < threshold.y;
      },
    };
  })
  .actions((self) => {
    return {
      createDrawingRegion(opts) {
        const control = self.control;
        const resultValue = control.getResultValue();

        self.currentArea = self.obj.createDrawingRegion(opts, resultValue, control, false);
        self.currentArea.setDrawing(true);

        self.applyActiveStates(self.currentArea);
        self.annotation.setIsDrawing(true);
        return self.currentArea;
      },
      resumeUnfinishedRegion(existingUnclosedPolygon) {
        self.currentArea = existingUnclosedPolygon;
        self.currentArea.setDrawing(true);
        self.annotation.regionStore.selection._updateResultsFromRegions([self.currentArea]);
        self.mode = "drawing";
        self.annotation.setIsDrawing(true);
        self.annotation.regionStore.selection.drawingSelect(self.currentArea);
        self.listenForClose?.();
        if (self.manager.findSelectedTool() !== self) {
          self.manager.selectTool(self, true);
        }
      },
      commitDrawingRegion() {
        const { currentArea, control, obj } = self;

        if (!currentArea) return;
        const source = currentArea.toJSON();
        const value = Object.keys(currentArea.serialize().value).reduce(
          (value, key) => {
            value[key] = source[key];
            return value;
          },
          { coordstype: "px", dynamic: self.dynamic, converted: true },
        );

        const [main, ...rest] = currentArea.results;
        const newArea = self.annotation.createResult(value, main.value.toJSON(), control, obj);

        //when user is using two different labels tag to draw a region, the other labels will be added to the region
        rest.forEach((r) => newArea.addResult(r.toJSON()));

        currentArea.setDrawing(false);
        self.deleteRegion();
        newArea.notifyDrawingFinished();
        return newArea;
      },
      createRegion(opts, skipAfterCreate = false) {
        const control = self.control;
        const resultValue = control.getResultValue();
        const activeStates = self.obj.activeStates();
        // Remove the main control from additional states to avoid duplication
        const additionalStates = activeStates.filter((state) => state !== control);

        if (ff.isActive(ff.FF_MULTIPLE_LABELS_REGIONS)) {
          self.currentArea = self.annotation.createResult(
            opts,
            resultValue,
            control,
            self.obj,
            skipAfterCreate,
            additionalStates,
          );
        } else {
          self.currentArea = self.annotation.createResult(opts, resultValue, control, self.obj, skipAfterCreate);
          self.applyActiveStates(self.currentArea);
        }
        return self.currentArea;
      },
      deleteRegion() {
        self.currentArea = null;
        self.obj.deleteDrawingRegion();
      },
      applyActiveStates(area) {
        const activeStates = self.obj.activeStates();

        activeStates.forEach((state) => {
          area.setValue(state);
        });
      },

      beforeCommitDrawing() {
        return true;
      },

      canStartDrawing() {
        return (
          !self.disabled &&
          !self.isIncorrectControl() &&
          !self.isIncorrectLabel() &&
          self.canStart() &&
          !self.annotation.isDrawing
        );
      },

      startDrawing(x, y) {
        self.annotation.history.freeze();
        self.mode = "drawing";
        self.currentArea = self.createDrawingRegion(self.createRegionOptions({ x, y }));
      },
      finishDrawing() {
        if (!self.beforeCommitDrawing()) {
          self.deleteRegion();
          if (self.control.type === self.tagTypes.stateTypes) self.annotation.unselectAll(true);
          self._resetState();
        } else {
          self._finishDrawing();
        }
      },
      _finishDrawing() {
        self.commitDrawingRegion();
        self._resetState();
      },
      _resetState() {
        self.annotation.setIsDrawing(false);
        self.annotation.history.unfreeze();
        self.mode = "viewing";
      },
    };
  });

const TwoPointsDrawingTool = DrawingTool.named("TwoPointsDrawingTool")
  .views((self) => ({
    get defaultDimensions() {
      return {
        width: self.MIN_SIZE.X,
        height: self.MIN_SIZE.Y,
      };
    },
  }))
  .actions((self) => {
    const DEFAULT_MODE = 0;
    const DRAG_MODE = 1;
    const TWO_CLICKS_MODE = 2;
    let currentMode = DEFAULT_MODE;
    let modeAfterMouseMove = DEFAULT_MODE;
    let startPoint = null;
    let endPoint = { x: 0, y: 0 };
    const Super = {
      finishDrawing: self.finishDrawing,
    };

    return {
      updateDraw: throttle((x, y) => {
        if (currentMode === DEFAULT_MODE) return;
        self.draw(x, y);
      }, 48), // 3 frames, optimized enough and not laggy yet

      draw(x, y) {
        const shape = self.getCurrentArea();

        if (!shape) return;
        const isEllipse = shape.type.includes("ellipse");
        const maxStageWidth = isFF(FF_DEV_3793) ? RELATIVE_STAGE_WIDTH : self.obj.stageWidth;
        const maxStageHeight = isFF(FF_DEV_3793) ? RELATIVE_STAGE_HEIGHT : self.obj.stageHeight;

        let { x1, y1, x2, y2 } = isEllipse
          ? {
              x1: shape.startX,
              y1: shape.startY,
              x2: x,
              y2: y,
            }
          : Utils.Image.reverseCoordinates({ x: shape.startX, y: shape.startY }, { x, y });

        x1 = Math.max(0, x1);
        y1 = Math.max(0, y1);
        x2 = Math.min(maxStageWidth, x2);
        y2 = Math.min(maxStageHeight, y2);

        let [distX, distY] = [x2 - x1, y2 - y1].map(Math.abs);

        if (isEllipse) {
          distX = Math.min(distX, Math.min(x1, maxStageWidth - x1));
          distY = Math.min(distY, Math.min(y1, maxStageHeight - y1));
        }

        shape.setPositionInternal(x1, y1, distX, distY, shape.rotation);
      },

      finishDrawing(x, y) {
        startPoint = null;
        Super.finishDrawing(x, y);
        currentMode = DEFAULT_MODE;
        modeAfterMouseMove = DEFAULT_MODE;
      },

      mousedownEv(ev, [x, y]) {
        if (!self.canStartDrawing()) return;
        if (!self.isAllowedInteraction(ev)) return;
        startPoint = { x, y };
        if (currentMode === DEFAULT_MODE) {
          modeAfterMouseMove = DRAG_MODE;
        }
      },

      mousemoveEv(_, [x, y]) {
        if (currentMode === DEFAULT_MODE && startPoint) {
          if (!self.comparePointsWithThreshold(startPoint, { x, y })) {
            currentMode = modeAfterMouseMove;
            if ([DRAG_MODE, TWO_CLICKS_MODE].includes(currentMode)) {
              self.startDrawing(startPoint.x, startPoint.y);
              if (!self.isDrawing) {
                currentMode = DEFAULT_MODE;
                return;
              }
            }
          }
        }
        if (!self.isDrawing) return;
        if ([DRAG_MODE, TWO_CLICKS_MODE].includes(currentMode)) {
          self.updateDraw(x, y);
        }
      },

      mouseupEv(_, [x, y]) {
        if (currentMode !== DRAG_MODE) return;
        endPoint = { x, y };
        if (!self.isDrawing) return;
        self.draw(x, y);
        self.finishDrawing(x, y);
      },

      clickEv(ev, [x, y]) {
        if (!self.canStartDrawing()) return;
        if (!self.isAllowedInteraction(ev)) return;
        // @todo: here is a potential problem with endPoint
        // it may be incorrect due to it may be not set at this moment
        if (startPoint && endPoint && !self.comparePointsWithThreshold(startPoint, endPoint)) return;
        if (currentMode === DEFAULT_MODE) {
          modeAfterMouseMove = TWO_CLICKS_MODE;
        } else if (self.isDrawing && currentMode === TWO_CLICKS_MODE) {
          self.draw(x, y);
          self.finishDrawing(x, y);
          currentMode = DEFAULT_MODE;
        }
      },

      dblclickEv(ev, [x, y]) {
        if (!self.canStartDrawing()) return;
        if (!self.isAllowedInteraction(ev)) return;

        let dX = self.defaultDimensions.width;
        let dY = self.defaultDimensions.height;

        if (isFF(FF_DEV_3793)) {
          dX = self.obj.canvasToInternalX(dX);
          dY = self.obj.canvasToInternalY(dY);
        }

        if (currentMode === DEFAULT_MODE) {
          self.startDrawing(x, y);
          if (!self.isDrawing) return;
          x += dX;
          y += dY;
          self.draw(x, y);
          self.finishDrawing(x, y);
        }
      },
    };
  });

const MultipleClicksDrawingTool = DrawingTool.named("MultipleClicksMixin")
  .views(() => ({
    canStart() {
      return !this.current();
    },
  }))
  .actions((self) => {
    let startPoint = { x: 0, y: 0 };
    let pointsCount = 0;
    let lastPoint = { x: -1, y: -1 };
    let lastEvent = 0;
    const MOUSE_DOWN_EVENT = 1;
    const MOUSE_UP_EVENT = 2;
    const CLICK_EVENT = 3;
    let lastClickTs = 0;
    const Super = {
      canStartDrawing: self.canStartDrawing,
    };

    return {
      canStartDrawing() {
        return Super.canStartDrawing() && !self.annotation.regionStore.hasSelection;
      },
      nextPoint(x, y) {
        const area = self.getCurrentArea();
        const object = self.obj;

        if (area && object && object.multiImage && area.item_index !== object.currentImage) return;

        self.getCurrentArea().addPoint(x, y);
        pointsCount++;
      },
      listenForClose() {
        console.error("MultipleClicksMixin model needs to implement listenForClose method in actions");
      },
      closeCurrent() {
        console.error("MultipleClicksMixin model needs to implement closeCurrent method in actions");
      },
      finishDrawing() {
        if (!self.isDrawing) return;

        self.annotation.regionStore.selection.drawingUnselect();

        pointsCount = 0;
        self.closeCurrent();
        setTimeout(() => {
          self._finishDrawing();
        });
      },
      cleanupUncloseableShape() {
        self.deleteRegion();
        if (self.control.type === self.tagTypes.stateTypes) self.annotation.unselectAll(true);
        self._resetState();
      },
      mousedownEv(ev, [x, y]) {
        if (!self.isAllowedInteraction(ev)) return;
        lastPoint = { x, y };
        lastEvent = MOUSE_DOWN_EVENT;
      },
      mouseupEv(ev, [x, y]) {
        if (lastEvent === MOUSE_DOWN_EVENT && self.comparePointsWithThreshold(lastPoint, { x, y })) {
          self._clickEv(ev, [x, y]);
          lastEvent = MOUSE_UP_EVENT;
        }
        lastPoint = { x: -1, y: -1 };
      },
      clickEv(ev, [x, y]) {
        if (lastEvent !== MOUSE_UP_EVENT) {
          self._clickEv(ev, [x, y]);
        }
        lastEvent = CLICK_EVENT;
        lastPoint = { x: -1, y: -1 };
      },
      _clickEv(ev, [x, y]) {
        if (!self.isAllowedInteraction(ev)) return;
        if (self.current()) {
          if (
            pointsCount === 1 &&
            self.comparePointsWithThreshold(startPoint, { x, y }) &&
            ev.timeStamp - lastClickTs < 350
          ) {
            // dblclick
            self.drawDefault();
          } else {
            if (self.comparePointsWithThreshold(startPoint, { x, y })) {
              if (pointsCount > 2) {
                self.finishDrawing();
              }
            } else {
              self.nextPoint(x, y);
            }
          }
        } else {
          if (!self.canStartDrawing()) return;
          startPoint = { x, y };
          pointsCount = 1;
          lastClickTs = ev.timeStamp;
          self.startDrawing(x, y);
          self.listenForClose();
        }
      },

      drawDefault() {
        const { x, y } = startPoint;
        let dX = self.defaultDimensions.length;
        let dY = self.defaultDimensions.length;

        if (isFF(FF_DEV_3793)) {
          dX = self.obj.canvasToInternalX(dX);
          dY = self.obj.canvasToInternalY(dY);
        }

        self.nextPoint(x + dX, y);
        self.nextPoint(x + dX / 2, y + Math.sin(Math.PI / 3) * dY);
        self.finishDrawing();
      },
    };
  });

const ThreePointsDrawingTool = DrawingTool.named("ThreePointsDrawingTool")
  .views((self) => ({
    canStart() {
      return !this.current();
    },
    get defaultDimensions() {
      return {
        width: self.MIN_SIZE.X,
        height: self.MIN_SIZE.Y,
      };
    },
  }))
  .actions((self) => {
    let points = [];
    let lastEvent = 0;
    const DEFAULT_MODE = 0;
    const MOUSE_DOWN_EVENT = 1;
    const MOUSE_UP_EVENT = 2;
    const CLICK_EVENT = 3;
    const DRAG_MODE = 4;
    const DBL_CLICK_EVENT = 5;
    let currentMode = DEFAULT_MODE;
    let startPoint = null;
    const Super = {
      finishDrawing: self.finishDrawing,
    };

    return {
      canStartDrawing() {
        return !self.isIncorrectControl();
      },
      updateDraw: (x, y) => {
        if (currentMode === DEFAULT_MODE) self.getCurrentArea()?.draw(x, y, points);
        else if (currentMode === DRAG_MODE) self.draw(x, y);
      },

      nextPoint(x, y) {
        points.push({ x, y });
        self.getCurrentArea().draw(x, y, points);
      },
      draw(x, y) {
        const shape = self.getCurrentArea();

        if (!shape) return;
        const maxStageWidth = isFF(FF_DEV_3793) ? RELATIVE_STAGE_WIDTH : self.obj.stageWidth;
        const maxStageHeight = isFF(FF_DEV_3793) ? RELATIVE_STAGE_HEIGHT : self.obj.stageHeight;

        let { x1, y1, x2, y2 } = Utils.Image.reverseCoordinates({ x: shape.startX, y: shape.startY }, { x, y });

        x1 = Math.max(0, x1);
        y1 = Math.max(0, y1);
        x2 = Math.min(maxStageWidth, x2);
        y2 = Math.min(maxStageHeight, y2);

        shape.setPositionInternal(x1, y1, x2 - x1, y2 - y1, shape.rotation);
      },

      finishDrawing(x, y) {
        if (self.isDrawing) {
          points = [];
          startPoint = null;
          currentMode = DEFAULT_MODE;
          Super.finishDrawing(x, y);
          setTimeout(() => {
            self._finishDrawing();
          });
        } else return;
      },

      mousemoveEv(_, [x, y]) {
        if (self.isDrawing) {
          if (lastEvent === MOUSE_DOWN_EVENT) {
            currentMode = DRAG_MODE;
          }

          if (currentMode === DRAG_MODE && startPoint) {
            self.startDrawing(startPoint.x, startPoint.y);
            self.updateDraw(x, y);
          } else if (currentMode === DEFAULT_MODE) {
            self.updateDraw(x, y);
          }
        }
      },
      mousedownEv(ev, [x, y]) {
        if (!self.canStartDrawing() || self.annotation.isDrawing) return;
        if (!self.isAllowedInteraction(ev)) return;
        lastEvent = MOUSE_DOWN_EVENT;
        startPoint = { x, y };
        self.mode = "drawing";
      },
      mouseupEv(_ev, [x, y]) {
        if (!self.canStartDrawing()) return;
        if (self.isDrawing) {
          if (currentMode === DRAG_MODE) {
            self.draw(x, y);
            self.finishDrawing(x, y);
          }
          lastEvent = MOUSE_UP_EVENT;
        }
      },
      clickEv(ev, [x, y]) {
        if (!self.canStartDrawing()) return;
        if (!self.isAllowedInteraction(ev)) return;
        if (currentMode === DEFAULT_MODE) {
          self._clickEv(ev, [x, y]);
        }
        lastEvent = CLICK_EVENT;
      },
      _clickEv(_ev, [x, y]) {
        if (points.length >= 2) {
          self.finishDrawing(x, y);
        } else if (points.length === 0) {
          points = [{ x, y }];
          self.startDrawing(x, y);
        } else {
          self.nextPoint(x, y);
        }
      },

      dblclickEv(ev, [x, y]) {
        lastEvent = DBL_CLICK_EVENT;
        if (!self.canStartDrawing()) return;
        if (!self.isAllowedInteraction(ev)) return;

        let dX = self.defaultDimensions.width;
        let dY = self.defaultDimensions.height;

        if (isFF(FF_DEV_3793)) {
          dX = self.obj.canvasToInternalX(dX);
          dY = self.obj.canvasToInternalY(dY);
        }

        if (currentMode === DEFAULT_MODE) {
          self.startDrawing(x, y);
          if (!self.isDrawing) return;
          x += dX;
          y += dY;
          self.draw(x, y);
          self.finishDrawing(x, y);
        }
      },
    };
  });

export { DrawingTool, TwoPointsDrawingTool, MultipleClicksDrawingTool, ThreePointsDrawingTool };