import { SearchFilter } from '@assets/filters/search/SearchFilter';
import { LabelsFilter } from '@assets/filters/labels/LabelsFilter';
import { InStoreFilter } from '@assets/filters/in-store/InStoreFilter';
import { PriceRangeFilter } from '@assets/filters/price-range/PriceRangeFilter';
import { VariationsFilter } from '@assets/filters/variations/VariationsFilter';
import { ProducersFilter } from '@assets/filters/producers/ProducersFilter';
import { ConvertorsFilter } from '@assets/filters/convertors/ConvertorsFilter';
import { ColorParameterFilter } from '@assets/filters/parameters/list/ColorParameterFilter';
import { RangeParameterFilter } from '@assets/filters/parameters/float/RangeParameterFilter';
import { MultiChoiceParameterFilter } from '@assets/filters/parameters/list/ListParameterFilter';
import { SellersFilter } from '@assets/filters/sellers/SellersFilter';
import { FilterType } from '@assets/filters/common/state-parsers/filterValuesCache';
import { translate as _ } from '@assets/js-shop/ShopUtils';
import { useTheme } from '@assets/filters/common/contexts/theme';
import { useConfig } from '@assets/filters/state';
import type { OrderedFilterEntry } from '@assets/filters/common/contexts/sharedStatics';
import type { OpenerBehaviour } from '@assets/filters/common/components/common';
import { useActiveFiltersCount } from '@assets/filters/common/hooks/useActiveFiltersCount';

type DefaultFilterLayoutProps = {
   openerBehaviour?: OpenerBehaviour;
};

export function FiltersWithDefaultOrder({ openerBehaviour }: DefaultFilterLayoutProps) {
   const config = useConfig();
   const theme = useTheme();

   return (
      <>
         {!!config.sellers && <SellersFilter openerBehaviour={openerBehaviour} />}

         {!!config.producers?.values.length && <ProducersFilter openerBehaviour={openerBehaviour} />}

         {!!config.priceRange && <PriceRangeFilter openerBehaviour={openerBehaviour} />}

         {!!config.variations && config.variations.map(({ id }) => (
            <VariationsFilter key={id} labelId={id} openerBehaviour={openerBehaviour} />
         ))}

         {config.parameters?.map((parameter) => {
            const { values, id, value_meaning } = parameter;
            if (Array.isArray(values) && values.length === 0) {
               return null;
            }

            if (value_meaning == 'color') {
               return <ColorParameterFilter parameterId={id} key={id} openerBehaviour={openerBehaviour} />;
            } else if (Array.isArray(values)) {
               return <MultiChoiceParameterFilter parameterId={id} key={id} openerBehaviour={openerBehaviour} />;
            } else {
               return <RangeParameterFilter parameterId={id} key={id} openerBehaviour={openerBehaviour} />;
            }
         })}

         {!!config.labels && <LabelsFilter openerBehaviour={openerBehaviour} />}

         {(!!config.inStore && !theme?.layouts?.inStoreTarget) && (
            <InStoreFilter openerBehaviour={openerBehaviour} key="in-store-filter" />
         )}

         {!!config.convertors?.length && config.convertors.map(({ id }) => (
            <ConvertorsFilter key={`convertor-${id}`} convertorId={id} openerBehaviour={openerBehaviour} />
         ))}
      </>
   );
}

export type OrderedFiltersProps = {
   openerBehaviour?: OpenerBehaviour;
   orderedFilters: OrderedFilterEntry[];
};

export function OrderedFilters(props: OrderedFiltersProps) {
   const { orderedFilters, openerBehaviour } = props;
   const config = useConfig();
   const theme = useTheme();

   return (
      <>
         {Object.values(orderedFilters ?? {}).map((filter, i) => {
            switch (filter.type) {
               case FilterType.search: return <SearchFilter key={`search${i}`} openerBehaviour={openerBehaviour} />;
               case FilterType.priceRange: return <PriceRangeFilter key={`price-range${i}`} openerBehaviour={openerBehaviour} />;
               case FilterType.producers: return <ProducersFilter key={`producers${i}`} openerBehaviour={openerBehaviour} />;
               case FilterType.labels: return <LabelsFilter key={`labels${i}`} openerBehaviour={openerBehaviour} />;
               case FilterType.sellers: return <SellersFilter key={`sellers${i}`} openerBehaviour={openerBehaviour} />;
               case FilterType.inStore: {
                  if (theme.layouts.inStoreTarget) {
                     return null;
                  }

                  return <InStoreFilter key={`in-store${i}`} openerBehaviour={openerBehaviour} />;
               }

               case FilterType.parameter: {
                  if (!('id_parameter' in filter)) {
                     return null;
                  }

                  const targetParameter = config.parameters?.find(p => p.id == filter.id_parameter);
                  if (!targetParameter) {
                     return null;
                  }

                  const { values, id, value_meaning } = targetParameter;
                  const isListParameter = Array.isArray(values);
                  if (isListParameter && values.length === 0) {
                     return null;
                  }

                  if (!isListParameter) {
                     return <RangeParameterFilter parameterId={id} key={`param-float${i}`} openerBehaviour={openerBehaviour} />;
                  }

                  if (value_meaning === 'color') {
                     return <ColorParameterFilter parameterId={id} key={`param-color${i}`} openerBehaviour={openerBehaviour} />;
                  }

                  return <MultiChoiceParameterFilter parameterId={id} key={`param-list${i}`} openerBehaviour={openerBehaviour} />;
               }

               case FilterType.variation: {
                  if ('convertor' in filter && !!filter.convertor) {
                     return <ConvertorsFilter key={`convertor${i}`} convertorId={+filter.convertor} openerBehaviour={openerBehaviour} />;
                  }

                  if (!('id_variation_label' in filter)) {
                     return null;
                  }

                  return <VariationsFilter key={`var${i}`} labelId={+filter.id_variation_label} openerBehaviour={openerBehaviour} />;
               }
            }
         })}
      </>
   );
}

type ShowModalButtonProps = {
   modalName: string;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   showCount?: boolean;
};

export function ShowModalButton(props: ShowModalButtonProps) {
   const {
      modalName,
      icon = <i dangerouslySetInnerHTML={{ __html: require('@assets/icons/filters.svg?raw') }} />,
      children = _('moreFiltersBtn'),
      showCount = false,
   } = props;

   const activeFiltersCount = useActiveFiltersCount();

   return (
      <div data-wpj-modal={modalName} className="filter-item filter-item-more">
         <button className="btn filter-item-opener">
            {children}
            {icon}
            {(showCount && activeFiltersCount > 0) && (
               <span className="filters-active-count">{activeFiltersCount}</span>
            )}
         </button>
      </div>
   );
}
