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

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

   function setSelected(newIds: number[]) {
      const setState = createSelectedSetter('storeIds', setFilterData);
      setState(newIds);
   }

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

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

const MemoizedSellersFilter = memo(SellersFilter);
export { MemoizedSellersFilter as SellersFilter };
