import { createPortal } from '@wordpress/element';
// @ts-ignore
// eslint-disable-next-line import/no-unresolved
import { DokanAlert } from '@dokan/components';
import useGlobalNoticeMount from '../../frontend/useGlobalNoticeMount';

type Props = {
    active: boolean;
    label?: string;
    ownIcons?: boolean;
    children: React.ReactNode;
};

/**
 * Page-specific verification notice, rendered in the dashboard-wide notice slot.
 *
 * The slot sits above the page heading, outside the React root, so the content
 * carries its own `dokan-layout` wrapper: the Tailwind build scopes every
 * utility under that class, so without it nothing below would be styled.
 *
 * The utilities themselves do compile — `src/base-tailwind.css` sources every
 * module's `src/` directory, and the result is enqueued as `dokan-pro-tailwind`
 * on the vendor dashboard.
 *
 * @param props          Component props.
 * @param props.active   Whether this page's notice should replace the default one.
 * @param props.label    Optional bold lead-in, rendered inline with the body.
 * @param props.ownIcons Body carries per-line status icons; drops the alert's own.
 * @param props.children Notice body.
 */
const GlobalVerificationNotice = ( {
    active,
    label,
    ownIcons,
    children,
}: Props ) => {
    const mount = useGlobalNoticeMount( active );

    if ( ! mount ) {
        return null;
    }

    /*
     * SimpleAlert exposes no prop for its leading icon; its wrapper is the
     * only `.flex-shrink-0` inside the alert, so an arbitrary variant hides
     * it without touching the DOM by hand. It has to sit on the alert, not on
     * the `dokan-layout` wrapper: utilities compile as `.dokan-layout <child>`,
     * so a class on the wrapper itself never matches. Still coupled to that
     * class name — if dokan-ui renames it the icon simply returns.
     */
    const alertClass = ownIcons ? '[&_.flex-shrink-0]:hidden' : '';

    return createPortal(
        <div className="dokan-layout" style={ { marginBottom: '1rem' } }>
            { /* The lead-in goes in the body rather than DokanAlert's `label`,
                 which renders as its own block and would push the rest onto a
                 second line. */ }
            <DokanAlert variant="warning" className={ alertClass }>
                <div className="text-sm">
                    { label && (
                        <>
                            <strong>{ label }</strong>{ ' ' }
                        </>
                    ) }
                    { children }
                </div>
            </DokanAlert>
        </div>,
        mount
    );
};

export default GlobalVerificationNotice;
