import { action, makeObservable } from 'mobx';
import { TagsModalState } from './TagsModalState';
import {
  FiltersMap,
  idNameArrayFilter,
  Tags,
  TagsManagementState,
  TaskState,
} from '@wix/bex-core';
import { TagsAssignButton } from '../components/TagsAssignButton';
import { CollectionManageTagsModal } from '../components/Tags/ManageTags/CollectionManageTagsModal';
import { TagsColumnConfig } from '../components/Tags/types';
import { ToolbarCollectionState } from './ToolbarCollectionState';
import { buildTagsColumn } from '../components/TagsColumn/TagsColumn';
import { buildTagsFilterElement } from '../components/TagsFilter/tagsFilterBuilder';
import { TagsBulkAssignPopoverState } from './TagsBulkAssignPopoverState';
import { CollectionToolbarFilters } from '../components/CollectionToolbarFilters';
import { Tags as TagsComponent, TagsProps } from '../components/Tags';
import { MoreActionItemFactory } from '../components/MoreActions/MoreActionsBase';

interface TagsCollectionStateParams<T, F extends FiltersMap>
  extends TagsProps<T, F> {
  toolbar: ToolbarCollectionState<T, F>;
  props?: TagsProps<T, F>;
  Tags: typeof TagsComponent;
}

export class TagsCollectionState<T, F extends FiltersMap> {
  readonly toolbar: ToolbarCollectionState<T, F>;
  readonly tagsManagementState: TagsManagementState;
  readonly tagsModalState: TagsModalState;
  readonly tagsBulkAssignPopoverState: TagsBulkAssignPopoverState<T, F>;
  readonly initTask = new TaskState();
  readonly props;
  readonly Tags;

  readonly components;
  readonly _columnConfig?: TagsColumnConfig<T>;
  readonly _getTags?: (item: T) => Tags;

  get featuredPageActions(): MoreActionItemFactory[] {
    return [this.Tags.manageTagsPageAction];
  }

  constructor({
    entityTypeName,
    bulkUpdateTags,
    asyncBulkUpdateTags,
    toolbar,
    columnConfig,
    getTags,
    assignButtonConfig,
    bulkUpdateTagsShowUndoToast,
    props,
    Tags,
  }: TagsCollectionStateParams<T, F>) {
    this.toolbar = toolbar;
    this.props = props;
    this.Tags = Tags;
    this.tagsManagementState = new TagsManagementState({
      fqdn: { ...toolbar.collection.fqdn },
      container: toolbar.container,
    });

    this.tagsModalState = new TagsModalState({
      tagsManagementState: this.tagsManagementState,
      entityTypeName,
    });

    this.tagsBulkAssignPopoverState = new TagsBulkAssignPopoverState({
      tagsManagementState: this.tagsManagementState,
      collectionState: toolbar.collection,
      tagsModalState: this.tagsModalState,
      bulkUpdateTags,
      asyncBulkUpdateTags,
      getTags,
      assignButtonConfig,
      bulkUpdateTagsShowUndoToast,
    });

    this._columnConfig = columnConfig;
    this._getTags = getTags;

    this.components = {
      AssignButton: TagsAssignButton,
      ManageModal: CollectionManageTagsModal,
      CollectionToolbarFilters,
    };

    makeObservable(this, {
      init: action,
      openManageTagsModal: action,
    });
  }

  init() {
    const disposers = [
      this.tagsManagementState.init(),
      this.tagsBulkAssignPopoverState.init(),
      this.tagsModalState.init(),
      this.toolbar.collection.query.addFilterIfNeeded(
        'tags' as any,
        idNameArrayFilter({
          name: 'tags',
        }),
      ),
    ];

    this.initTask.runOnce(async () => {
      await Promise.all([
        this.tagsManagementState.initTask.status.promise,
        this.toolbar.container.initTask.status.promise,
      ]);

      this.addTagsColumn();
    });

    return () => {
      disposers.forEach((d) => d?.());
    };
  }

  buildTagsFilterWrapper() {
    return buildTagsFilterElement(this.toolbar);
  }

  addTagsColumn() {
    const tagsColumn = buildTagsColumn(
      this.toolbar?.container,
      this._columnConfig,
    );

    const userTagsColumn = this.toolbar._userColumns.find(
      (column) => column.id === tagsColumn.id,
    );

    if (!userTagsColumn) {
      this.toolbar.addFeatureColumn(tagsColumn);
    }
  }

  openManageTagsModal() {
    this.tagsModalState.openManageTagsModal({ origin: 'external' });
  }
}