import React, { ReactNode, useState } from 'react';
import { ContextType, WixPatternsEssentialsOverrides } from '@wix/bex-core';
import { useEssentials } from '@wix/fe-essentials/react';
import { CairoProvider } from '../providers';
import { buildWixPatternsEssentials } from './buildWixPatternsEssentials';

export interface WixPatternsEssentialsProviderProps {
  value?: Partial<WixPatternsEssentialsOverrides>;
  children?: ReactNode;
  localCache?: boolean;
  contextType?: ContextType;
}

export function WixPatternsEssentialsProvider({
  value,
  children,
  localCache,
  contextType,
}: WixPatternsEssentialsProviderProps) {
  const essentials = useEssentials();

  const [wixPatternsEssentials] = useState(() =>
    buildWixPatternsEssentials(essentials, {
      overrides: value,
    }),
  );

  return (
    <CairoProvider
      value={wixPatternsEssentials}
      localCache={localCache}
      contextType={contextType}
    >
      {children}
    </CairoProvider>
  );
}
