import { Box } from '@wix/design-system';
import React from 'react';
import { ToolbarCollectionState } from '../../state';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import { FiltersPanelAppliedFiltersSection } from './FiltersPanelAppliedFiltersSection';

export interface FiltersPanelFooterProps<T, F extends FiltersMap> {
  state: ToolbarCollectionState<T, F>;
  onClearButtonClicked?: () => unknown;
}

function _FiltersPanelFooter<T, F extends FiltersMap>(
  props: FiltersPanelFooterProps<T, F>,
) {
  const { state, onClearButtonClicked } = props;

  const FiltersPanelSelectedFiltersSection =
    state.AddApplyFiltersButton?.FiltersPanelSelectedFiltersSection;

  return (
    <Box
      gap="SP2"
      paddingTop="SP3"
      paddingBottom="SP3"
      paddingLeft="SP4"
      paddingRight="SP4"
      verticalAlign="middle"
      width="100%"
      boxSizing="border-box"
    >
      {FiltersPanelSelectedFiltersSection ? (
        <FiltersPanelSelectedFiltersSection state={state} />
      ) : (
        <FiltersPanelAppliedFiltersSection
          state={state}
          onClearButtonClicked={onClearButtonClicked}
        />
      )}
    </Box>
  );
}

export const FiltersPanelFooter = observer(_FiltersPanelFooter);