import { FiltersMap, useSyncProps } from '@wix/bex-core';
import { observable } from 'mobx';
import { ReactElement, useState } from 'react';
import { ToolbarCollectionState } from '../../state';

export interface UseCollectionToolbarSyncedPropsParams<
  T,
  F extends FiltersMap,
> {
  left?: ReactElement;
  viewsToolbarItem?: ReactElement;
  filtersElement?: ReactElement;
  state: ToolbarCollectionState<T, F>;
}

export function useCollectionToolbarSyncedProps<T, F extends FiltersMap>(
  props: UseCollectionToolbarSyncedPropsParams<T, F>,
) {
  const { state, left, viewsToolbarItem } = props;

  const syncedProps = useSyncProps(
    {
      useResponsiveLayout: !!viewsToolbarItem || !!left,
    },
    {
      useResponsiveLayout: observable.ref,
    },
  );

  useState(() => {
    state._syncedProps = syncedProps;
  });

  return syncedProps;
}