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

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

export function TopHorizontal({ hasSideModal = false }) {
   const config = useConfig();
   const filterOrder = useFilterOrder();

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

   if (!Object.keys(filterOrder ?? {}).length) {
      return (
         <FormLayoutProvider layout={{ isTopHorizontal: true }}>
            <FiltersWithDefaultOrder />
            {hasSideModal && <ShowModalButton modalName="side-filters" />}
         </FormLayoutProvider>
      );
   }

   return (
      <FormLayoutProvider layout={{ isTopHorizontal: true }}>
         <OrderedFilters orderedFilters={filterOrder} />
         {hasSideModal && <ShowModalButton modalName="side-filters" />}
      </FormLayoutProvider>
   );
}
