import { __ } from '@wordpress/i18n';
import domReady from '@wordpress/dom-ready';
import { registerPlugin } from '@wordpress/plugins';
import Verification from '../components/frontend/Verification';
import GlobalVerificationNotice from '../components/frontend/GlobalVerificationNotice';
import {
    hasActiveSubscriptionPendingVerification,
    requiresVerificationToSell,
} from './localizedData';
import { setDefaultNoticeVisible } from './useGlobalNoticeMount';
// @ts-ignore
// eslint-disable-next-line import/no-unresolved
import { VisitStore } from '@dokan/components';

const VerificationLink = () => (
    <a href="#/settings/verification" className="text-dokan-link font-medium">
        { __( 'Complete Verification →', 'dokan' ) }
    </a>
);

const ProductsPageNotice = () => (
    <GlobalVerificationNotice
        active={ requiresVerificationToSell() }
        label={ __( 'One more step before you can list products.', 'dokan' ) }
    >
        { __( 'Your account is pending admin verification.', 'dokan' ) }{ ' ' }
        <VerificationLink />
    </GlobalVerificationNotice>
);

const SubscriptionPageNotice = () => (
    <GlobalVerificationNotice
        active={ hasActiveSubscriptionPendingVerification() }
        ownIcons
    >
        <div>
            <span aria-hidden="true">✅</span>{ ' ' }
            <strong>{ __( 'Subscription:', 'dokan' ) }</strong>{ ' ' }
            { __( 'Active', 'dokan' ) }
        </div>
        <div>
            <span aria-hidden="true">⚠️</span>{ ' ' }
            <strong>{ __( 'Selling Status:', 'dokan' ) }</strong>{ ' ' }
            { __( 'Disabled — Verification required.', 'dokan' ) }
        </div>
        <div>
            { __(
                'Your subscription is active. However, selling is currently disabled on your account pending admin verification.',
                'dokan'
            ) }{ ' ' }
            <VerificationLink />
        </div>
    </GlobalVerificationNotice>
);

registerPlugin( 'dokan-verification-products-notice', {
    render: ProductsPageNotice,
    scope: 'dokan-products',
} );

registerPlugin( 'dokan-verification-subscription-notice', {
    render: SubscriptionPageNotice,
    scope: 'dokan-vendor-subscription',
} );

/**
 * Routes whose page notice takes over the default one, with the condition
 * under which they do. Mirrors the `active` prop of each notice above and in
 * `Verification.tsx`.
 */
const CLAIMING_ROUTES: Array< { path: string; isActive: () => boolean } > = [
    { path: '/products', isActive: requiresVerificationToSell },
    {
        path: '/subscription',
        isActive: hasActiveSubscriptionPendingVerification,
    },
    { path: '/settings/verification', isActive: requiresVerificationToSell },
];

/**
 * Current React dashboard route, normalised to `/leading/no-trailing-slash`.
 *
 * The hash arrives in several shapes — `#/products`, `#products/`, with a query
 * string — so this normalises the way the router does before matching.
 *
 * @return The route path, or `/` for the dashboard root.
 */
const getCurrentRoutePath = (): string => {
    const hash = window.location.hash.replace( /^#/, '' ).split( '?' )[ 0 ];

    return '/' + hash.replace( /^\/+|\/+$/g, '' );
};

domReady( () => {
    /*
     * PHP prints the default notice before the React app boots, and the page
     * notice only hides it once its route has rendered. On first load of a
     * claiming route that gap would flash the generic wording, so hide the
     * default now; useGlobalNoticeMount keeps it in sync from here on.
     */
    const path = getCurrentRoutePath();

    if (
        CLAIMING_ROUTES.some(
            ( route ) => route.path === path && route.isActive()
        )
    ) {
        setDefaultNoticeVisible( false );
    }

    // @ts-ignore
    window.wp.hooks.addFilter(
        'dokan-dashboard-routes',
        'dokan-pro-verification',
        ( routes: any ) => {
            routes.push( {
                id: 'settings-verification',
                title: (
                    <VisitStore>{ __( 'Verification', 'dokan' ) }</VisitStore>
                ),
                element: <Verification />,
                path: '/settings/verification',
                exact: true,
                order: 10,
                parent: 'settings',
                capabilities: [ 'dokan_view_store_verification_menu' ],
            } );
            return routes;
        }
    );
} );
