import React from 'react';
import { observer } from 'mobx-react-lite';
import { Divider, ListItemAction } from '@wix/design-system';
import { Add } from '@wix/wix-ui-icons-common';
import { FiltersMap } from '@wix/bex-core';
import { CollectionViewsState } from '../../state';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface SaveToNewViewFooterProps<T, F extends FiltersMap> {
  state: CollectionViewsState<T, F>;
}

function _SaveToNewViewFooter<T, F extends FiltersMap>({
  state,
}: SaveToNewViewFooterProps<T, F>) {
  const { translate: t } = useWixPatternsContainer();
  const { views: viewsState } = state;

  return (
    <div data-hook="save-to-new-view-footer">
      <Divider />
      <ListItemAction
        size="medium"
        weight="thin"
        dataHook="save-to-new-view"
        prefixIcon={<Add />}
        disabled={viewsState.reachedViewsLimit}
        onClick={() => {
          viewsState.saveViewModal.open();
          state.table.closeSidePanel();
        }}
        title={t('cairo.manageView.saveNewView.CTA')}
      />
    </div>
  );
}

export const SaveToNewViewFooter = observer(_SaveToNewViewFooter);