import { types } from "mobx-state-tree";
import { AudioModel } from "../../tags/object/Audio/model";
import Utils from "../../utils";
import Constants from "../../core/Constants";
import { clamp } from "../../utils/utilities";

export const AudioRegionModel = types
  .model("AudioRegionModel", {
    type: "audioregion",
    object: types.late(() => types.reference(AudioModel)),

    start: types.number,
    end: types.number,
    channel: types.optional(types.number, 0),

    selectedregionbg: types.optional(types.string, "rgba(0, 0, 0, 0.5)"),
  })
  .volatile(() => ({
    hideable: true,
    _ws_region: null,
  }))
  .views((self) => ({
    get bboxTriggers() {
      return [self.start, self.end, self._ws_region, self.object?._ws, self.object?._wfFrame];
    },
    get bboxCoordsCanvas() {
      if (!self.bboxTriggers) {
        return null;
      }

      const { _ws_region } = self;
      if (!_ws_region) return null;
      if (!_ws_region.inViewport) return null;

      const { xStart, xEnd, yStart, yEnd, visualizer } = _ws_region;
      return {
        left: clamp(xStart, 0, visualizer.width),
        top: yStart,
        right: clamp(xEnd, 0, visualizer.width),
        bottom: yEnd,
      };
    },

    wsRegionOptions() {
      const reg = {
        id: self.id,
        start: self.start,
        end: self.end,
        color: self.getColor(),
        visible: !self.hidden,
        updateable: !self.isReadOnly(),
        deletable: !self.isReadOnly(),
        channel: self.channel ?? 0,
      };

      return reg;
    },
  }))
  .actions((self) => {
    /**
     * @returns {AudioRegionResult}
     */
    const Super = {
      setProperty: self.setProperty,
      setLocked: self.setLocked,
    };

    return {
      serialize() {
        const res = {
          original_length: self.object._ws?.duration,
          value: {
            start: self.start,
            end: self.end,
            channel: self.channel,
          },
        };

        return res;
      },

      getColor(alpha = 1) {
        return Utils.Colors.convertToRGBA(self.getOneColor(), alpha);
      },

      updateColor(alpha = 1) {
        const color = self.getColor(alpha);

        self._ws_region?.updateColor(color);
      },

      updatePosition(start, end) {
        self._ws_region?.updatePosition(start ?? self.start, end ?? self.end);
      },

      /**
       * Select audio region
       */
      selectRegion() {
        if (!self._ws_region) return;
        self._ws_region.handleSelected(true);
        self._ws_region.bringToFront();
        self._ws_region.scrollToRegion();
      },

      deleteRegion() {
        self.annotation.deleteRegion(self);
      },

      /**
       * Unselect audio region
       */
      afterUnselectRegion() {
        if (!self._ws_region) return;
        self._ws_region.handleSelected(false);
      },

      setHighlight(val) {
        self._highlighted = val;

        if (!self._ws_region) return;
        self._ws_region.handleHighlighted(val);
      },

      beforeDestroy() {
        if (self._ws_region) self._ws_region.remove();
      },

      setLocked(locked) {
        Super.setLocked(locked);

        if (self._ws_region) self._ws_region.setLocked(self.locked);
      },

      onMouseOver() {
        if (self.annotation.isLinkingMode) {
          self.setHighlight(true);
          self._ws_region.switchCursor(Constants.LINKING_MODE_CURSOR);
        }
      },

      onMouseLeave() {
        if (self.annotation.isLinkingMode) {
          self.setHighlight(false);
          self._ws_region.switchCursor(Constants.MOVE_CURSOR);
        }
      },

      onUpdateEnd() {
        self.start = self._ws_region.start;
        self.end = self._ws_region.end;
        self.notifyDrawingFinished();
      },

      toggleHidden(e) {
        e?.stopPropagation();
        self.hidden = !self.hidden;

        if (!self._ws_region) return;
        self._ws_region.setVisibility(!self.hidden);
      },

      setProperty(propName, value) {
        Super.setProperty(propName, value);
        if (["start", "end"].includes(propName)) {
          self.updatePosition();
        }
      },

      setWSRegion(wsRegion) {
        self._ws_region = wsRegion;

        if (wsRegion) {
          wsRegion.on("mouseOver", self.onMouseOver);
          wsRegion.on("mouseLeave", self.onMouseLeave);
        }
      },
    };
  });