// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { MemoryRouter } from "react-router-dom";
import { Breadcrumb } from "@coreai-ds/react-components";
import { BreadcrumbItem } from "@coreai-ds/react-components";
import * as React from "react";
import type { BreadcrumbButtonProps as CoreAIBreadcrumbButtonProps } from "@coreai-ds/react-components";
import type { LinkProps as RouterLinkProps } from "react-router-dom";
import { useHref } from "react-router-dom";
import { Link as RouterLink } from "react-router-dom";
import { useBreadcrumbButton_unstable } from "@coreai-ds/react-components";
import { useBreadcrumbButtonStyles_unstable } from "@coreai-ds/react-components";
import { renderBreadcrumbButton_unstable } from "@coreai-ds/react-components";
import { BreadcrumbDivider } from "@coreai-ds/react-components";

type BreadcrumbLinkProps = Omit<CoreAIBreadcrumbButtonProps, keyof RouterLinkProps | 'as' | 'href'> & RouterLinkProps;

const routerLinkPropNames = [
    'defaultShouldRevalidate',
    'discover',
    'download',
    'hrefLang',
    'mask',
    'media',
    'ping',
    'prefetch',
    'preventScrollReset',
    'referrerPolicy',
    'relative',
    'rel',
    'reloadDocument',
    'replace',
    'state',
    'target',
    'to',
    'type',
    'viewTransition',
] as const satisfies readonly (keyof RouterLinkProps)[];

type RouterLinkSlotProps = Pick<RouterLinkProps, (typeof routerLinkPropNames)[number]>;

type SlotRootProps = React.ComponentPropsWithoutRef<'a'> & {
    as?: unknown;
    disabled?: boolean;
    value?: unknown;
};

type ComponentProps<T> = Omit<T, keyof RouterLinkSlotProps>;

function splitRouterLinkProps<T extends RouterLinkSlotProps>(props: T): [
    RouterLinkSlotProps,
    ComponentProps<T>
] {
    const routerProps: Record<string, unknown> = {};
    const componentProps: Record<string, unknown> = { ...props };
    for (const name of routerLinkPropNames) {
        routerProps[name] = props[name];
        delete componentProps[name];
    }
    return [routerProps as RouterLinkSlotProps, componentProps as ComponentProps<T>];
}

function useStableRouterLinkProps(props: RouterLinkSlotProps): RouterLinkSlotProps {
    const { defaultShouldRevalidate, discover, download, hrefLang, mask, media, ping, prefetch, preventScrollReset, referrerPolicy, relative, rel, reloadDocument, replace, state, target, to, type, viewTransition, } = props;
    return React.useMemo(() => ({
        defaultShouldRevalidate,
        discover,
        download,
        hrefLang,
        mask,
        media,
        ping,
        prefetch,
        preventScrollReset,
        referrerPolicy,
        relative,
        rel,
        reloadDocument,
        replace,
        state,
        target,
        to,
        type,
        viewTransition,
    }), [
        defaultShouldRevalidate,
        discover,
        download,
        hrefLang,
        mask,
        media,
        ping,
        prefetch,
        preventScrollReset,
        referrerPolicy,
        relative,
        rel,
        reloadDocument,
        replace,
        state,
        target,
        to,
        type,
        viewTransition,
    ]);
}

function useRouterLinkSlot<T extends RouterLinkSlotProps>(props: T): [
    React.ForwardRefExoticComponent<SlotRootProps & React.RefAttributes<HTMLAnchorElement>>,
    ComponentProps<T>
] {
    const [routerProps, componentProps] = splitRouterLinkProps(props);
    const stableRouterProps = useStableRouterLinkProps(routerProps);
    const RouterLinkSlot = React.useMemo(() => React.forwardRef<HTMLAnchorElement, SlotRootProps>(({ as: _as, disabled, href: _href, onClick, tabIndex, type: _type, ...slotProps }, slotRef) => {
        const isDisabled = disabled ||
            slotProps['aria-disabled'] === true ||
            slotProps['aria-disabled'] === 'true';
        const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
            if (isDisabled) {
                event.preventDefault();
                event.stopPropagation();
                return;
            }
            onClick?.(event);
        };
        return (<RouterLink {...slotProps} {...stableRouterProps} target={stableRouterProps.target ?? slotProps.target} rel={stableRouterProps.rel ?? slotProps.rel} aria-disabled={isDisabled ? true : slotProps['aria-disabled']} onClick={handleClick} ref={slotRef} tabIndex={tabIndex ?? (isDisabled ? -1 : undefined)}/>);
    }), [stableRouterProps]);
    return [RouterLinkSlot, componentProps];
}

const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>((props, ref) => {
    const href = useHref(props.to, { relative: props.relative });
    const [RouterLinkSlot, breadcrumbButtonProps] = useRouterLinkSlot(props);
    const breadcrumbProps = {
        ...(breadcrumbButtonProps as CoreAIBreadcrumbButtonProps),
        as: 'a',
        href,
    } as CoreAIBreadcrumbButtonProps;
    const breadcrumbRef = ref as unknown as React.Ref<HTMLButtonElement>;
    const breadcrumbState = useBreadcrumbButton_unstable(breadcrumbProps, breadcrumbRef);
    (breadcrumbState.root as unknown as {
        as?: React.ElementType;
    }).as = RouterLinkSlot;
    useBreadcrumbButtonStyles_unstable(breadcrumbState);
    return renderBreadcrumbButton_unstable(breadcrumbState);
});

export const Default = () => (<MemoryRouter>
      <Breadcrumb aria-label="Project breadcrumb">
        <BreadcrumbItem>
          <BreadcrumbLink to="/projects">Projects</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbLink current to="/projects/coreai">
            CoreAI
          </BreadcrumbLink>
        </BreadcrumbItem>
      </Breadcrumb>
    </MemoryRouter>);

export default Default;