// TODO: [P2] This component can be replaced by `bindProps`.
import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
import { InjectStyleElements, injectStyleElementsPropsSchema } from 'botframework-webchat-component/internal.js';
import { useStyleOptions } from 'botframework-webchat-component/hook.js';
import React, { memo, type FunctionComponent } from 'react';
import { never, object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';

import createBundleStyleElements from './createBundleStyleElements';

const bundleStylesheetPropsSchema = pipe(
  object({
    at: optional(injectStyleElementsPropsSchema.entries.at),
    children: optional(never()),
    nonce: undefinedable(string())
  }),
  readonly()
);

type BundleStylesheetProps = InferInput<typeof bundleStylesheetPropsSchema>;

const styleElements = createBundleStyleElements('bundle');

function BundleStylesheet(props: BundleStylesheetProps) {
  const { nonce, at } = validateProps(bundleStylesheetPropsSchema, props);

  const [{ stylesRoot }] = useStyleOptions();

  return <InjectStyleElements at={at ?? stylesRoot} nonce={nonce} styleElements={styleElements} />;
}

BundleStylesheet.displayName = 'BundleStylesheet';

export default memo(BundleStylesheet as FunctionComponent<BundleStylesheetProps>);
export { bundleStylesheetPropsSchema, type BundleStylesheetProps };