import '@twig/scss/jsshop/filters/_filter-base.scss';

import * as React from 'react';
import { createPortal } from 'react-dom';
import { FilterResets } from '@assets/filters/layouts/resets';
import { FiltersContextProvider } from '@assets/filters/state';
import { useFilterData } from '@assets/filters/state';
import { ThemeProvider } from '@assets/filters/common/contexts/theme';
import { useRenderTarget } from '@assets/filters/common/hooks/useRenderTarget';
import theme from '@assets/filters/ShopTheme';
import { translate as _t } from '@assets/js-shop/ShopUtils';
import { useActiveFiltersCount } from '@assets/filters/common/hooks/useActiveFiltersCount';
import { SideModal } from '@assets/filters/layouts/side-modal';
import { Side } from '@assets/filters/layouts/side';
import { TopHorizontal } from '@assets/filters/layouts/top-horizontal';
import { useQuerySelectorAllOnce } from '@assets/js-shop/hooks';
import { ShowModalButton } from '@assets/filters/layouts/shared';

const InStoreFilter = React.lazy(() =>
   import('@assets/filters/in-store/InStoreFilter').then(({ InStoreFilter }) => ({ default: InStoreFilter })),
);

function ResetAllButton() {
   const { filterData, setFilterData } = useFilterData();
   const count = useActiveFiltersCount();

   return (
      <>
         {!!Object.keys(filterData).length && count > 0 && (
            <button
               className="reset-all"
               onClick={() => setFilterData({})}
            >
               {_t('filters.clear')} ({count})
            </button>
         )}
      </>
   );
}

function SectionFilters() {
   const sideModal = useRenderTarget(theme.layouts.sideModalTarget);
   const side = useRenderTarget(theme.layouts.sideTarget);
   const topHorizontal = useRenderTarget(theme.layouts.topHorizontalTarget);
   const inStore = useRenderTarget(theme.layouts.inStoreTarget);

   const reset = useRenderTarget(theme.renderTargetReset);
   const openButtons = useQuerySelectorAllOnce(theme.openButtonTarget);

   return (
      <ThemeProvider theme={theme}>
         {!!sideModal && createPortal(
            <SideModal />,
            sideModal,
         )}

         {!!side && createPortal(
            <Side />,
            side,
         )}

         {!!topHorizontal && createPortal(
            <TopHorizontal hasSideModal={!!theme.layouts.sideModalTarget}/>,
            topHorizontal,
         )}

         {!!inStore && createPortal(
            <InStoreFilter showCount={false} openerBehaviour={{ hidden: true }} />,
            inStore,
         )}

         {!!reset && createPortal(
            <>
               <FilterResets />
               <ResetAllButton />
            </>,
            reset,
         )}

         {Array.from(openButtons).map((button, i) => createPortal(
            <ShowModalButton showCount modalName="side-filters" key={`show-modal-filters-${i}`} />,
            button,
         ))}
      </ThemeProvider>
   );
}

export {
   SectionFilters,
   FiltersContextProvider as Provider,
};
