import { FiltersMap } from '@wix/bex-core';
import { useEffect, useMemo, useState } from 'react';
import { action, reaction, runInAction } from 'mobx';
import { ToolbarCollectionProps } from './ToolbarCollection';
import { checkConflictingToolbarProps } from './checkConflictingToolbarProps';
import { useCollectionPageContext } from '../../providers';
import { useWixPatternsRouter } from '../../providers/WixPatternsRouterProvider';
import { useSyncTotal } from '../../hooks/useSyncTotal';

export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
  props: ToolbarCollectionProps<T, F> & {
    isUsingDragAndDrop: boolean;
    isUsingBulkActionsToolbar: boolean;
    isUsingHorizontalScroll: boolean;
    isUsingFolders: boolean;
    isUsingTableVirtualization: boolean;
    isUsingExpandCollapse?: boolean;
  },
) {
  const {
    state,
    views,
    tabs,
    exportButton,
    importButton,
    dragAndDropCategories,
    maxSelection,
    search,
    filters,
    isUsingDragAndDrop,
    isUsingBulkActionsToolbar,
    isUsingHorizontalScroll,
    isUsingFolders,
    isUsingTableVirtualization,
    summaryBar,
    secondaryActions,
    moreActions,
    internalScroll,
    showFieldTypeIcons,
  } = props;

  checkConflictingToolbarProps(props);

  state.internalScroll = state.container.isPanelLayout ? true : internalScroll;
  runInAction(() => {
    state.showFieldTypeIcons = showFieldTypeIcons ?? false;
  });

  const pageState = useCollectionPageContext();
  const router = useWixPatternsRouter();

  useEffect(() => {
    pageState.primaryToolbar = state;

    return () => {
      if (pageState.primaryToolbar === state) {
        pageState.primaryToolbar = null;
      }
    };
  }, []);

  useEffect(() => {
    reaction(
      () => ({
        scrollTop: state.scrollTopBeforeUnmount,
        routerState: router?.currentState,
      }),
      ({ scrollTop, routerState }) => {
        pageState.scrollTopBeforeUnmount = routerState?._createdEntity
          ? 0
          : scrollTop;
      },
      { fireImmediately: true },
    );

    return () => {
      const scrollTop =
        pageState.pageState.scrollableContentRef.current?.scrollTop;
      if (scrollTop !== undefined) {
        state.scrollTopBeforeUnmount = scrollTop;
      }
    };
  }, []);

  const getIsUsingAllItemsView = () =>
    !!(
      // views=undefined, it means thw user didn't pass so allItemsViews=false
      (
        views &&
        // views.props=undefined, it means the user passed views without configuring allItems so allItemsViews=true
        (!views.props ||
          // views.props.allItemsViewProps=undefined, it means the user passed allItemsViewProps
          // without configuring the hidden so allItemsViews=true
          !views.props.allItemsViewProps ||
          // allItemsViews depends on hidden's value
          !views.props.allItemsViewProps.hidden)
      )
    );

  useEffect(() => {
    if (exportButton) {
      state.featuredComponents.exportButton.set(exportButton);
    }

    return () => {
      state.featuredComponents.exportButton.set(null);
    };
  }, [exportButton]);

  useEffect(() => {
    if (importButton) {
      state.featuredComponents.importButton.set(importButton);
    }

    return () => {
      state.featuredComponents.importButton.set(null);
    };
  }, [importButton]);

  const tabsFilterProps = useMemo(() => {
    return tabs?.props
      ? {
          filter: tabs.props.filter,
        }
      : undefined;
  }, [tabs]);

  useEffect(
    () =>
      reaction(
        () => pageState.hasHeader,
        (hasHeader) => {
          if (hasHeader) {
            state.minimizedHeaderHeight = 66;
          }
        },
        {
          fireImmediately: true,
        },
      ),
    [],
  );

  useSyncTotal(state.collection);

  useEffect(() => {
    runInAction(() => {
      state.dragAndDropCategories = dragAndDropCategories;
    });
    // We accept this prop once on purpose because it's array it changes on every render. We expose a setter `set dragAndDropCategories` instead.
  }, []);

  useState(() => views?.type.setViewsState(state, views?.props));

  useEffect(
    action(() => {
      state.viewsProps = views?.props;
    }),
    [views],
  );

  useState(() => {
    props.AddApplyFiltersButton?.setStateObject(state);

    state.featuresAvailability = {
      isDisablingSearch: search === false,
      isUsingFilters: !!filters,
      isUsingDragAndDrop,
      isUsingBulkActionsToolbar,
      isUsingHorizontalScroll,
      isUsingFolders,
      isUsingTableVirtualization,
      isUsingTags: !!props.tags,
      isUsingTabs: !!tabs,
      isUsingSummaryRow: !!summaryBar,
      isUsingSecondaryActions: !!secondaryActions,
      isUsingMoreActions: !!moreActions,
    };

    state.additionalFeaturesAvailability = {
      isUsingTableSubtitle: !!props.title?.props.subtitle,
      isUsingCounterInHeader: !!props.title?.props.showTotal,
      isUsingSelectAllLimitation: !!props.maxSelection,
      isUsingErrorMessage: !!(props.errorState ?? props.renderError),
      isUsingAllItemsView: getIsUsingAllItemsView(),
      isUsingCustomEmptyState: !!props.emptyState,
      isUsingCustomNoResultsState: !!props.noResultsState,
      isUsingPrimaryActionCta: !!props.primaryActionButton,
      isUsingExpandCollapse: !!props.isUsingExpandCollapse,
    };
  });

  useEffect(
    action(() => {
      if (tabsFilterProps?.filter) {
        state.tabsFilterProps = tabsFilterProps;
        tabsFilterProps.filter.persistent = true;
      }
    }),
    [tabsFilterProps],
  );

  useEffect(() => {
    runInAction(() => {
      state.bulk.maxSelection = maxSelection;
    });
  }, [maxSelection]);

  return state;
}