import { createContext, useContext, useMemo } from 'react';
import type { OrProduceWith } from '@assets/js-shop/helpers';

import type { Selection as Parameters } from '@assets/filters/parameters/filterDataSlice';
import type { Selection as Producers } from '@assets/filters/producers/filterDataSlice';
import type { Selection as Labels } from '@assets/filters/labels/filterDataSlice';
import type { Selection as PriceRange } from '@assets/filters/price-range/filterDataSlice';
import type { Selection as Variations } from '@assets/filters/variations/filterDataSlice';
import type { Selection as InStore } from '@assets/filters/in-store/filterDataSlice';
import type { Selection as Search } from '@assets/filters/search/filterDataSlice';
import type { Selection as Convertors } from '@assets/filters/convertors/filterDataSlice';
import type { Selection as Sections } from '@assets/filters/sections/filterDataSlice';
import type { Selection as Sellers } from '@assets/filters/sellers/filterDataSlice';

export type FilterData =
   & PriceRange
   & Parameters
   & Producers
   & Labels
   & Variations
   & InStore
   & Convertors
   & Sections
   & Search
   & Sellers;

const filterDataContext = createContext<[
   FilterData,
   (filterData: OrProduceWith<FilterData>) => void,
]>([
   {},
   () => {},
]);

export function useFilterData() {
   const [filterData, setFilterData] = useContext(filterDataContext);

   return useMemo(() => {
      return {
         filterData,
         setFilterData,
      };
   }, [filterData]);
}

export const Provider = filterDataContext.Provider;
