import { memo, useCallback } from 'react';
import { FilterCommonProps, FilterOpener } from '@assets/filters/common/components/common';
import { useConfig, useFilterData  } from '@assets/filters/state';
import { useTheme } from '@assets/filters/common/contexts/theme';
import { createSelectedSetter } from '@assets/filters/utils';
import { translate as _ } from '@assets/js-shop/ShopUtils';
import MultiChoiceFilter from '@assets/filters/common/components/MultiChoiceFilter';

function SectionsFilter({ openerBehaviour = {}, withSearch }: FilterCommonProps<'multi-choice'>) {
   const { sections: config  } = useConfig();
   const { filterData: { sectionIDsFilter }, setFilterData } = useFilterData();
   const { multiChoice: theme } = useTheme();

   const setSelected = useCallback(createSelectedSetter('sectionIDsFilter', setFilterData), [setFilterData]);

   if (!config) {
      return <></>;
   }

   return (
      <FilterOpener
         title={_('sections')}
         isOpen={!!sectionIDsFilter?.length}
         activeFilters={sectionIDsFilter?.length}
         {...theme.openerBehaviour}
         {...openerBehaviour}
      >
         <MultiChoiceFilter
            values={config}
            selected={sectionIDsFilter ?? []}
            setSelected={setSelected}
            withSearch={withSearch}
         />
      </FilterOpener>
   );
}

const MemoizedSectionsFilter = memo(SectionsFilter);
export { MemoizedSectionsFilter as SectionsFilter };
