import deepEqual from "deep-equal";
import { clone, destroy, flow, getParent, getRoot, getSnapshot, types } from "mobx-state-tree";
import { guidGenerator } from "../../utils/random";
import { normalizeFilterValue } from "./filter_utils";
import { TabFilter } from "./tab_filter";
import { TabHiddenColumns } from "./tab_hidden_columns";
import { TabSelectedItems } from "./tab_selected_items";
import { History } from "../../utils/history";
import { CustomJSON, StringOrNumberID, ThresholdType } from "../types";
import { clamp } from "../../utils/helpers";
import { FF_ANNOTATION_RESULTS_FILTERING, isFF } from "../../utils/feature-flags";

const THRESHOLD_MIN = 0;
const THRESHOLD_MIN_DIFF = 0.001;

export const Tab = types
  .model("View", {
    id: StringOrNumberID,

    title: "Tasks",
    oldTitle: types.maybeNull(types.string),

    key: types.optional(types.string, guidGenerator),

    type: types.optional(types.enumeration(["list", "grid"]), "list"),

    target: types.optional(types.enumeration(["tasks", "annotations"]), "tasks"),

    filters: types.array(types.late(() => TabFilter)),
    conjunction: types.optional(types.enumeration(["and", "or"]), "and"),
    hiddenColumns: types.maybeNull(types.optional(TabHiddenColumns, {})),
    ordering: types.optional(types.array(types.string), []),
    selected: types.optional(TabSelectedItems, {}),
    opener: types.optional(types.maybeNull(types.late(() => Tab)), null),
    columnsWidth: types.map(types.maybeNull(types.number)),
    columnsDisplayType: types.map(types.maybeNull(types.string)),
    gridWidth: 4,
    gridFitImagesToWidth: false,

    enableFilters: false,
    renameMode: false,
    saved: false,
    virtual: false,
    locked: false,
    editable: true,
    deletable: true,
    semantic_search: types.optional(types.array(CustomJSON), []),
    threshold: types.optional(types.maybeNull(ThresholdType), null),
    agreement_selected: types.optional(CustomJSON, {}),
  })
  .volatile(() => {
    const defaultWidth = getComputedStyle(document.body)
      .getPropertyValue("--menu-sidebar-width")
      .replace("px", "")
      .trim();

    const labelingTableWidth = Number.parseInt(localStorage.getItem("labelingTableWidth") ?? defaultWidth ?? 200);

    return {
      labelingTableWidth,
    };
  })
  .views((self) => ({
    /** @returns {import("../../components/App/App").AppStore} */
    get root() {
      return getRoot(self);
    },

    get parent() {
      return getParent(getParent(self));
    },

    get columns() {
      return self.root.viewsStore.columns;
    },

    get targetColumns() {
      return self.columns.filter((c) => {
        return c.target === self.target && !c.isAnnotationResultsFilterColumn;
      });
    },

    // get fields formatted as columns structure for react-table
    get fieldsAsColumns() {
      return self.columns.reduce((res, column) => {
        if (!column.parent) {
          res.push(...column.asField);
        }
        return res;
      }, []);
    },

    get hiddenColumnsList() {
      return self.columns.filter((c) => c.hidden).map((c) => c.key);
    },

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

    get dataStore() {
      return self.root.dataStore;
    },

    get taskStore() {
      return self.root.taskStore;
    },

    get annotationStore() {
      return self.root.annotationStore;
    },

    get currentFilters() {
      return self.filters.filter((f) => {
        const targetMatches = f.target === self.target;
        const annotationResultsOK = isFF(FF_ANNOTATION_RESULTS_FILTERING) || !f.field.isAnnotationResultsFilterColumn;

        return targetMatches && annotationResultsOK;
      });
    },

    get currentOrder() {
      return self.ordering.length
        ? self.ordering.reduce((res, field) => {
            const fieldName = field.replace(/^-/, "");
            const desc = field[0] === "-";

            return {
              ...res,
              [fieldName]: desc,
              desc,
              field: fieldName,
              column: self.columns.find((c) => c.id === fieldName),
            };
          }, {})
        : null;
    },

    get filtersApplied() {
      return self.validFilters.length;
    },

    get validFilters() {
      return self.filters.filter((f) => !!f.isValidFilter);
    },

    get serializedFilters() {
      const serialize = (filterModel) => {
        const item = {
          ...getSnapshot(filterModel),
          type: filterModel.filter.currentType,
        };

        // cleanup or recurse on child_filter
        if (item.child_filter) {
          if (!filterModel.child_filter?.isValidFilter) {
            item.child_filter = null;
          } else {
            item.child_filter = serialize(filterModel.child_filter);
          }
        }

        item.value = normalizeFilterValue(item.type, item.operator, item.value);
        return item;
      };

      return self.validFilters.map((el) => serialize(el));
    },

    get selectedCount() {
      const selectedCount = self.selected.list.length;
      const dataLength = self.dataStore.total;

      return self.selected.all ? dataLength - selectedCount : selectedCount;
    },

    get allSelected() {
      return self.selectedCount === self.dataStore.total;
    },

    get filterSnapshot() {
      return {
        conjunction: self.conjunction,
        items: self.serializedFilters,
      };
    },

    // key used in urls
    get tabKey() {
      return self.virtual ? self.key : self.id;
    },

    get hiddenColumnsSnapshot() {
      return getSnapshot(self.hiddenColumns);
    },

    get query() {
      return JSON.stringify({
        filters: self.filterSnapshot,
        ordering: self.ordering.toJSON(),
        hiddenColumns: self.hiddenColumnsSnapshot,
        agreement_selected: self.agreement_selected,
      });
    },

    serialize() {
      if (self.virtual) {
        return {
          title: self.title,
          filters: self.filterSnapshot,
          ordering: self.ordering.toJSON(),
          agreement_selected: self.agreement_selected,
        };
      }

      const tab = {};
      const { apiVersion } = self.root;

      const data = {
        title: self.title,
        ordering: self.ordering.toJSON(),
        type: self.type,
        target: self.target,
        filters: self.filterSnapshot,
        hiddenColumns: getSnapshot(self.hiddenColumns),
        columnsWidth: self.columnsWidth.toPOJO(),
        columnsDisplayType: self.columnsDisplayType.toPOJO(),
        gridWidth: self.gridWidth,
        gridFitImagesToWidth: self.gridFitImagesToWidth,
        semantic_search: self.semantic_search?.toJSON() ?? [],
        threshold: self.threshold?.toJSON(),
        agreement_selected: self.agreement_selected,
      };

      if (self.saved || apiVersion === 1) {
        tab.id = self.id;
      }

      if (apiVersion === 2) {
        tab.data = data;
        tab.project = self.root.SDK.projectId;
      } else {
        Object.assign(tab, data);
      }

      self.root.SDK.invoke("tabTypeChanged", { tab: tab.id, type: self.type });
      return tab;
    },
  }))
  .volatile(() => ({
    snapshot: {},
  }))
  .actions((self) => ({
    lock() {
      self.locked = true;
    },

    unlock() {
      self.locked = false;
    },

    setType(type) {
      self.type = type;
      self.root.SDK.invoke("tabTypeChanged", { tab: self.id, type });
      self.save({ reload: false });
    },

    setTarget(target) {
      self.target = target;
      self.save();
    },

    setTitle(title) {
      self.title = title;
    },

    setRenameMode(mode) {
      self.renameMode = mode;
      if (self.renameMode) self.oldTitle = self.title;
    },

    setConjunction(value) {
      self.conjunction = value;
      self.save();
    },

    setOrdering(value) {
      if (value === null) {
        self.ordering = [];
      } else {
        const direction = self.currentOrder?.[value];
        let ordering = value;

        if (direction !== undefined) {
          ordering = direction ? value : `-${value}`;
        }

        self.ordering[0] = ordering;
      }

      self.clearSelection();
      self.save({ interaction: "ordering" });
    },

    setLabelingTableWidth(width) {
      self.labelingTableWidth = width;
      localStorage.setItem("labelingTableWidth", self.labelingTableWidth);
    },

    setGridWidth(width) {
      self.gridWidth = width;
      self.save();
    },

    setFitImagesToWidth(responsive) {
      self.gridFitImagesToWidth = responsive;
      self.save();
    },

    setSelected(ids) {
      self.selected = ids;
    },

    setSemanticSearch(semanticSearchList, min, max) {
      self.semantic_search = semanticSearchList ?? [];
      /* if no semantic search we have to clean up threshold */
      if (self.semantic_search.length === 0) {
        self.threshold = null;
        return self.save();
      }
      /* if we have a min and max we need to make sure we save that too.
      this prevents firing 2 view save requests to accomplish the same thing */
      return !isNaN(min) && !isNaN(max) ? self.setSemanticSearchThreshold(min, max) : self.save();
    },

    setSemanticSearchThreshold(_min, max) {
      const min = clamp(_min ?? THRESHOLD_MIN, THRESHOLD_MIN, max - THRESHOLD_MIN_DIFF);

      if (self.semantic_search?.length && !isNaN(min) && !isNaN(max)) {
        self.threshold = { min, max };
        return self.save();
      }
    },

    clearSemanticSearchThreshold(save = true) {
      self.threshold = null;
      return save && self.save();
    },

    selectAll() {
      self.selected.toggleSelectedAll();
    },

    clearSelection() {
      self.selected.clear();
    },

    toggleSelected(id) {
      self.selected.toggleItem(id);
    },

    setColumnWidth(columnID, width) {
      if (width) {
        self.columnsWidth.set(columnID, width);
      } else {
        self.columnsWidth.delete(columnID);
      }
    },

    setColumnDisplayType(columnID, type) {
      if (type !== null) {
        const filters = self.filters.filter(({ filter }) => {
          return columnID === filter.field.id;
        });

        filters.forEach((f) => {
          if (f.type !== type) f.delete();
        });

        self.columnsDisplayType.set(columnID, type);
      } else {
        self.columnsDisplayType.delete(columnID);
      }
    },

    createFilter() {
      const filterType = self.availableFilters[0];
      const filter = TabFilter.create({
        filter: filterType,
        view: self.id,
      });

      self.filters.push(filter);

      // Immediately materialize child filter for the default column, if any
      self.applyChildFilter(filter);

      if (filter.isValidFilter) self.save();
    },

    /**
     * Create a new filter row for the provided filter *type* (column).
     */
    createChildFilterForType(filterType, parentFilter) {
      const filter = TabFilter.create({
        filter: filterType,
        view: self.id,
      });

      // Don't add to main filters array - child is owned by parent
      parentFilter.child_filter = filter;

      return filter;
    },

    toggleColumn(column) {
      if (self.hiddenColumns.hasColumn(column)) {
        self.hiddenColumns.remove(column);
      } else {
        self.hiddenColumns.add(column);
      }
      self.save();
    },

    setAgreementFilters({
      ground_truth = false,
      annotators = { all: true, ids: [] },
      models = { all: true, ids: [] },
    }) {
      self.agreement_selected = {
        ground_truth,
        annotators: {
          all: annotators.all,
          ids: annotators.ids,
        },
        models: {
          all: models.all,
          ids: models.ids,
        },
      };
    },

    reload: flow(function* ({ interaction } = {}) {
      if (self.saved) {
        yield self.dataStore.reload({ id: self.id, interaction });
      }
      if (self.virtual) {
        yield self.dataStore.reload({ query: self.query, interaction });
      }

      getRoot(self).SDK?.invoke?.("tabReloaded", self);
    }),

    deleteFilter(filter) {
      // Recursively delete child filter first
      if (filter.child_filter) {
        self.deleteFilter(filter.child_filter);
      }

      const index = self.filters.findIndex((f) => f === filter);
      if (index > -1) {
        self.filters.splice(index, 1);
        destroy(filter);
        self.save();
      }
    },

    afterAttach() {
      self.hiddenColumns = self.hiddenColumns ?? clone(self.parent.defaultHidden);
    },

    afterCreate() {
      self.snapshot = self.serialize();
    },

    save: flow(function* ({ reload, interaction } = {}) {
      const serialized = self.serialize();

      if (!self.saved || !deepEqual(self.snapshot, serialized)) {
        self.snapshot = serialized;
        if (self.virtual === true) {
          const snapshot = self.serialize();

          self.key = self.parent.snapshotToUrl(snapshot);

          const projectId = self.root.SDK.projectId;

          // Save the virtual tab of the project to local storage to persist between page navigations
          if (projectId) {
            localStorage.setItem(`virtual-tab-${projectId}`, JSON.stringify(snapshot));
          }

          History.navigate({ tab: self.key }, true);
          self.reload({ interaction });
        } else {
          yield self.parent.saveView(self, { reload, interaction });
        }
      }
    }),

    saveVirtual: flow(function* (options) {
      self.virtual = false;
      yield self.save(options);
      History.navigate({ tab: self.id }, true);
    }),

    delete: flow(function* () {
      yield self.root.apiCall("deleteTab", { tabID: self.id });
    }),

    markSaved() {
      self.saved = true;
    },

    /**
     * Create child filters for a given root filter according to its column's `child_filter` metadata.
     */
    applyChildFilter(rootFilter) {
      if (!rootFilter || !rootFilter.filter || !rootFilter.filter.field) return;

      const column = rootFilter.field;
      const childFilter = column?.child_filter;

      if (!childFilter) return;

      // NOTE: using targetColumns instead of columns means that annotation results columns cannot be used in child_filters, but seems fine for now
      const firstChildColumn = self.targetColumns.find((c) => c.alias === childFilter);

      if (firstChildColumn && !rootFilter.child_filter) {
        const filterType = self.availableFilters.find((ft) => ft.field.id === firstChildColumn.id);

        if (filterType) {
          const childFilter = self.createChildFilterForType(filterType, rootFilter);
        }
      }
    },

    /** Remove any child filters previously created */
    clearChildFilter(rootFilter) {
      if (rootFilter.child_filter) {
        self.deleteFilter(rootFilter.child_filter);
        rootFilter.child_filter = null;
      }
    },
  }))
  .preProcessSnapshot((snapshot) => {
    if (snapshot === null) return snapshot;

    const { filters, agreement_selected, ...sn } = snapshot ?? {};

    if (filters && !Array.isArray(filters)) {
      const { conjunction, items } = filters ?? {};

      Object.assign(sn, {
        filters: items ?? [],
        conjunction: conjunction ?? "and",
      });
    } else {
      sn.filters = filters;
    }

    if (agreement_selected) {
      Object.assign(sn, {
        agreement_selected:
          typeof agreement_selected === "string" ? JSON.parse(agreement_selected) : agreement_selected,
      });
    }
    delete sn.selectedItems;

    return sn;
  });