import * as React from 'react';
import { useConfig } from '@assets/filters/common/contexts/config';
import { FiltersWithDefaultOrder, OrderedFilters } from '@assets/filters/layouts/shared';
import { useFilterOrder } from '@assets/filters/common/contexts/sharedStatics';
import { FormLayoutProvider } from '@assets/filters/common/contexts/formLayout';

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

const openerBehaviour = { closeOnOutsideClick: false };

export function Side() {
   const config = useConfig();
   const filterOrder = useFilterOrder();

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

   if (!Object.keys(filterOrder ?? {}).length) {
      return (
         <FormLayoutProvider layout={{ isTopHorizontal: false }}>
            <div className="filter-side">
               <FiltersWithDefaultOrder openerBehaviour={openerBehaviour} />
            </div>
         </FormLayoutProvider>
      );
   }

   return (
      <FormLayoutProvider layout={{ isTopHorizontal: false }}>
         <div className="filter-side">
            <OrderedFilters orderedFilters={filterOrder} openerBehaviour={openerBehaviour} />
         </div>
      </FormLayoutProvider>
   );
}
