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

export interface WixPatternsEssentialsProviderProps
  extends CairoProviderBaseProps {
  value?: Partial<WixPatternsEssentialsOverrides>;
}

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

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

  return (
    <CairoProvider {...props} value={wixPatternsEssentials}>
      {children}
    </CairoProvider>
  );
}