import { TablePopupPropsContext } from '@servicetitan/design-system';
import { createContext, FC, useContext } from 'react';
import { useMFEDataContext, useMFEMetadataContext } from '../contexts';

jest.mock('@progress/kendo-licensing', () => ({ validatePackage: jest.fn() }));

const FallbackContext = createContext(undefined);

export const MockComponent: FC<Record<string, any>> = props => {
    const data = useMFEDataContext();
    const metadata = useMFEMetadataContext();
    /*
     * TablePopupPropsContext is undefined when a test mocks
     * @servicetitan/design-system as an empty object. Fall back to
     * a no-op context so the component renders without it.
     */
    const popupProps = useContext(TablePopupPropsContext ?? FallbackContext);
    const appendTo = popupProps?.({}).appendTo;

    return (
        <div>
            {Object.entries(props).map(([name, value]) => (
                <span key={name}>{`Prop: ${name}, Value: ${stringifyValue(value)}`}</span>
            ))}
            {Object.entries(data).map(([name, value]) => (
                <span key={name}>{`Data: ${name}, Value: ${stringifyValue(value)}`}</span>
            ))}
            {Object.entries(metadata).map(([name, value]) => (
                <span key={name}>{`Metadata: ${name}, Value: ${stringifyValue(value)}`}</span>
            ))}
            {/* eslint-disable-next-line @typescript-eslint/no-base-to-string */}
            <span>TablePopupPropsContext appendTo: {String(appendTo)}</span>
        </div>
    );
};

function stringifyValue(value: any) {
    return JSON.stringify(value, (_key, value) =>
        value instanceof ShadowRoot ? 'ShadowRoot' : value
    );
}