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

import Registry from "../core/Registry";
import { AreaMixin } from "../mixins/AreaMixin";
import NormalizationMixin from "../mixins/Normalization";
import RegionsMixin from "../mixins/Regions";
import { VideoModel } from "../tags/object/Video/Video";
import { isDefined } from "../utils/utilities";
import { EditableRegion } from "./EditableRegion";

const TimelineRange = types.model("TimelineRange", {
  start: types.maybeNull(types.integer),
  end: types.maybeNull(types.integer),
});

// convert range to internal video timeline format
// it's used in `flatMap()`, so it can return both object and array of objects
function rangeToSequence(range) {
  const { start, end } = range;

  if (!isDefined(start)) {
    if (!isDefined(end)) return [];
    return { frame: end, enabled: false };
  }
  if (!isDefined(end)) {
    return { frame: start, enabled: true };
  }
  if (start === end) {
    return { frame: start, enabled: false };
  }
  return [
    {
      frame: start,
      enabled: true,
    },
    {
      frame: end,
      enabled: false,
    },
  ];
}

/**
 * TimelineRegion, a region on the video timeline.
 * @see Timeline/Views/Frames#onFrameScrub() - this method creates a region by drawing on the timeline
 */
const Model = types
  .model("TimelineRegionModel", {
    type: "timelineregion",
    object: types.late(() => types.reference(VideoModel)),

    ranges: types.array(TimelineRange),
  })
  .volatile(() => ({
    hideable: true,
    editableFields: [
      { property: "start", label: "Start frame" },
      { property: "end", label: "End frame" },
    ],
  }))
  .views((self) => ({
    get parent() {
      return isAlive(self) ? self.object : null;
    },
    get sequence() {
      return self.ranges.flatMap(rangeToSequence);
    },
    getShape() {
      return null;
    },
  }))
  .actions((self) => ({
    /**
     * @example
     * {
     *   "value": {
     *     "ranges": [{"start": 3, "end": 5}],
     *     "timelinelabels": ["Moving"]
     *   }
     * }
     * @typedef {Object} TimelineRegionResult
     * @property {Object} value
     * @property {object[]} value.ranges Array of ranges, each range is an object with `start` and `end` properties. One range per region.
     * @property {string[]} [value.timelinelabels] Regions are created by `TimelineLabels`, and the corresponding label is listed here.
     */

    onSelectInOutliner() {
      // skip video to the first frame of this region
      // @todo hidden/disabled timespans?
      self.object.setFrame(self.ranges[0].start);
    },

    /**
     * @return {TimelineRegionResult}
     */
    serialize() {
      return {
        value: {
          ranges: self.ranges,
        },
      };
    },
    isInLifespan(targetFrame) {
      return true;
    },
    /**
     * Set range for the region, only one frame for now,
     * could be extended to multiple frames in a future in a form of (...ranges)
     * @param {number[]} [start, end] Start and end frames
     * @param {Object} [options]
     * @param {"new" | "edit" | undefined} [options.mode] Do we dynamically change the region ("new" one or "edit" existing one) or just edit it precisely (undefined)?
     *        In first two cases we need to update undo history only once
     */
    setRange([start, end], { mode } = {}) {
      if (self.locked) return;
      if (mode === "new") {
        // we need to update existing history item while drawing a new region
        self.parent.annotation.history.setReplaceNextUndoState();
      } else if (mode === "edit") {
        // we need to skip updating history item while editing existing region and record the state when we finish editing
        /** @see Video#finishDrawing() */
        self.parent.annotation.history.setSkipNextUndoState();
      }
      self.ranges = [{ start, end }];
    },
  }));

const TimelineRegionModel = types.compose(
  "TimelineRegionModel",
  RegionsMixin,
  AreaMixin,
  NormalizationMixin,
  EditableRegion,
  Model,
);

Registry.addRegionType(TimelineRegionModel, "video");

export { TimelineRegionModel };