import * as React from 'react';
import type { FilterCommonProps } from '@assets/filters/common/components/common';

export type LayoutTarget = HTMLElement | string | null;
export type SupportedLayout = 'sideModal' | 'side' | 'topHorizontal' | 'inStore';

export type Theme = {
   multiChoice: FilterCommonProps<'multi-choice'>;
   range: FilterCommonProps<'range'>;
   reset: { grouped?: boolean };
   layouts: Readonly<Record<`${SupportedLayout}Target`, LayoutTarget>>;
   openByDefault: boolean;
   openButtonTarget: string | null;
   renderTargetReset: LayoutTarget;
};

export const ThemeFactory = {
   default: (): Theme => ({
      multiChoice: {},
      range: {},
      reset: {},
      renderTargetReset: null,
      openButtonTarget: null,
      layouts: {
         inStoreTarget: null,
         sideTarget: null,
         sideModalTarget: null,
         topHorizontalTarget: null,
      },
      openByDefault: null,
   }),
} as const;

const themeContext = React.createContext<Theme>(ThemeFactory.default());

export function ThemeProvider(props: { theme?: Partial<Theme>; children?: React.ReactNode }) {
   const { theme: userTheme, children } = props;

   const theme = React.useMemo(() => ({ ...ThemeFactory.default(), ...userTheme }), [userTheme]);

   return <themeContext.Provider value={theme}>{children}</themeContext.Provider>;
}

export function useTheme() {
   return React.useContext(themeContext);
}
