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

import { guidGenerator } from "../core/Helpers";
import Tree, { TRAVERSE_SKIP } from "../core/Tree";
import Area from "../regions/Area";
import { isDefined } from "../utils/utilities";

const localStorageKeys = {
  order: "relations:order",
};

/**
 * Relation between two different nodes
 */
const Relation = types
  .model("Relation", {
    id: types.optional(types.identifier, guidGenerator),

    node1: types.reference(Area),
    node2: types.reference(Area),

    direction: types.optional(types.enumeration(["left", "right", "bi"]), "right"),

    // labels
    labels: types.maybeNull(types.array(types.string)),
  })
  .volatile(() => ({
    showMeta: false,
    visible: true,
  }))
  .views((self) => ({
    get parent() {
      return getParentOfType(self, RelationStore);
    },

    get control() {
      return self.parent.control;
    },

    get selectedValues() {
      return self.labels?.filter((relationLabel) => {
        return self.control?.values.includes(relationLabel);
      });
    },

    get hasRelations() {
      return self.control?.children?.length > 0;
    },

    get shouldRender() {
      if (!isAlive(self)) return false;
      const { node1: start, node2: end } = self;
      const [sIdx, eIdx] = [start.item_index, end.item_index];

      // as we don't currently have a unified solution for multi-object segmentation
      // and the Image tag is the only one to support it, we rely on its API
      // TODO: make multi-object solution more generic
      if (isDefined(sIdx) && start.object.multiImage && sIdx !== start.object.currentImage) return false;

      if (isDefined(eIdx) && end.object.multiImage && eIdx !== end.object.currentImage) return false;

      return true;
    },
  }))
  .actions((self) => ({
    rotateDirection() {
      const d = ["left", "right", "bi"];
      let idx = d.findIndex((item) => item === self.direction);

      idx = idx + 1;
      if (idx >= d.length) idx = 0;

      self.direction = d[idx];
    },

    toggleHighlight() {
      if (self.node1 === self.node2) {
        self.node1.toggleHighlight();
      } else {
        self.node1.toggleHighlight();
        self.node2.toggleHighlight();
      }
    },

    toggleMeta() {
      self.showMeta = !self.showMeta;
    },

    setSelfHighlight(highlighted = false) {
      if (highlighted) {
        self.parent.setHighlight(self);
      } else {
        self.parent.removeHighlight();
      }
    },

    toggleVisibility() {
      self.visible = !self.visible;
    },

    setRelations(values) {
      self.labels = values;
    },
  }));

const RelationStore = types
  .model("RelationStore", {
    relations: types.array(Relation),
    order: types.optional(
      types.enumeration(["asc", "desc"]),
      window.localStorage.getItem(localStorageKeys.order) ?? "asc",
    ),
  })
  .volatile(() => ({
    showConnections: true,
    _highlighted: null,
    control: null,
  }))
  .views((self) => ({
    get highlighted() {
      return self.relations.find((r) => r.id === self._highlighted);
    },
    get size() {
      return self.relations.length;
    },
    get orderedRelations() {
      if (!self.relations) return [];
      if (self.order === "asc") {
        return self.relations.slice();
      }
      return self.relations.slice().reverse();
    },
    get isAllHidden() {
      return !self.relations.find((rl) => !rl.visible);
    },
    get values() {
      return self.control?.values ?? [];
    },
  }))
  .actions((self) => ({
    afterAttach() {
      const appStore = getRoot(self);

      // find <Relations> tag in the tree
      let relationsTag = null;

      Tree.traverseTree(appStore.annotationStore.root, (node) => {
        if (node.type === "relations") {
          relationsTag = node;
          return TRAVERSE_SKIP;
        }
      });
      self.setControl(relationsTag);
    },
    setControl(relationsTag) {
      self.control = relationsTag;
    },
    findRelations(node1, node2) {
      const id1 = node1.id || node1;
      const id2 = node2?.id || node2;

      if (!id2) {
        return self.relations.filter((rl) => {
          return rl.node1.id === id1 || rl.node2.id === id1;
        });
      }

      return self.relations.filter((rl) => {
        return rl.node1.id === id1 && rl.node2.id === id2;
      });
    },

    nodesRelated(node1, node2) {
      return self.findRelations(node1, node2).length > 0;
    },

    addRelation(node1, node2) {
      if (self.nodesRelated(node1, node2)) return;

      const rl = Relation.create({ node1, node2 });

      // self.relations.unshift(rl);
      self.relations.push(rl);

      return rl;
    },

    deleteRelation(rl) {
      self.relations = self.relations.filter((r) => r.id !== rl.id);
      destroy(rl);
    },

    deleteNodeRelation(node) {
      // lookup $node and delete it's relation
      const rl = self.findRelations(node);

      rl.length && rl.forEach(self.deleteRelation);
    },

    deleteAllRelations() {
      self.relations.forEach((rl) => destroy(rl));
      self.relations = [];
    },

    serialize() {
      return self.relations.map((r) => {
        const s = {
          from_id: r.node1.cleanId,
          to_id: r.node2.cleanId,
          type: "relation",
          direction: r.direction,
        };

        if (r.selectedValues) s.labels = r.selectedValues;

        return s;
      });
    },

    deserializeRelation(node1, node2, direction, labels) {
      const rl = self.addRelation(node1, node2);

      if (!rl) return; // duplicated relation

      rl.direction = direction;
      rl.labels = labels;
    },

    toggleConnections() {
      self.showConnections = !self.showConnections;
    },

    toggleOrder() {
      self.order = self.order === "asc" ? "desc" : "asc";
      window.localStorage.setItem(localStorageKeys.order, self.order);
    },

    toggleAllVisibility() {
      const shouldBeHidden = !self.isAllHidden;

      self.relations.forEach((rl) => {
        if (rl.visible !== shouldBeHidden) {
          rl.toggleVisibility();
        }
      });
    },

    setHighlight(relation) {
      self._highlighted = relation.id;
    },

    removeHighlight() {
      self._highlighted = null;
    },
  }));

export default RelationStore;