import { useConfig, useFilterData } from '@assets/filters/state';
import { usePriceFormatter } from '@assets/js-shop/hooks';
import Reset from '@assets/filters/common/components/Reset';
import { translate as _ } from '@assets/js-shop/ShopUtils';

export function PriceRangeReset() {
   const { filterData, setFilterData } = useFilterData();
   const { priceRange: config } = useConfig();

   const formatPrice = usePriceFormatter({
      locale: config?.locale ?? 'cs_CZ',
      currencyCode: config?.currency ?? 'CZK',
   });

   return (
      <>
         {filterData.priceRange && (
            <Reset onClick={() => setFilterData(prev => {
               const newState = { ...prev };
               delete newState.priceRange;

               return newState;
            })}>
               <span className="name">{_('priceRange')}:&nbsp;</span>
               <span className="value">
                  {formatPrice(filterData.priceRange.from)} - {formatPrice(filterData.priceRange.to)}
               </span>
            </Reset>
         )}
      </>
   );
}
