import { HTMLAttributes, ReactNode, RefAttributes, FC } from 'react';

import { Export, findModuleExport } from '../webpack';
import { FooterLegendProps } from './FooterLegend';
import { createPropListRegex } from '../utils';

export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
	children: ReactNode;
	'flow-children'?: string;
	focusClassName?: string;
	focusWithinClassName?: string;
	noFocusRing?: boolean;
	onActivate?: (e: CustomEvent) => void;
	onCancel?: (e: CustomEvent) => void;
}

const focusableRegex = createPropListRegex(['flow-children', 'onActivate', 'onCancel', 'focusClassName', 'focusWithinClassName']);

/** @component React Components */
export const Focusable = findModuleExport((e: Export) => e?.render?.toString && focusableRegex.test(e.render.toString())) as FC<
	FocusableProps & RefAttributes<HTMLDivElement>
>;