import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { CollectionSaveViewModal } from './modals/SaveView/CollectionSaveViewModal';
import { CollectionViewsState } from '../../state';
import { View } from '../../model';
import { CollectionRenameViewModal } from './modals/RenameView/CollectionRenameViewModal';

export interface ViewsDropdownModalsProps<T, F extends FiltersMap> {
  state: CollectionViewsState<T, F>;
  onSaveView?: (view: View<F>) => void | Promise<void>;
}

function _ViewsDropdownModals<T, F extends FiltersMap>({
  state,
}: ViewsDropdownModalsProps<T, F>) {
  return (
    <>
      <CollectionSaveViewModal
        state={state}
        dataHook="collection-save-view-modal"
      />

      <CollectionRenameViewModal
        state={state}
        dataHook="collection-rename-view-modal"
      />
    </>
  );
}

export const ViewsDropdownModals = observer(_ViewsDropdownModals);