import React from "react";
import Link from "../layout/Link";
import Divider from "../layout/Divider";
import Row from "../layout/Row";
import lowerToTitleCase from "../utils/lower-to-title-case";
import { twMerge } from "tailwind-merge";

type LinkObject = {
    title: string;
    path: string;
};
type Props = {
    excludeRegexMatch?: RegExp;
};

/**
 * # TWUI Breadcrumbs
 * @className `twui-current-breadcrumb-link`
 * @className `twui-current-breadcrumb-wrapper`
 */
export default function Breadcrumbs({ excludeRegexMatch }: Props) {
    const [links, setLinks] = React.useState<LinkObject[] | null>(null);
    const [current, setCurrent] = React.useState(false);

    React.useEffect(() => {
        let pathname = window.location.pathname;
        let pathLinks = pathname.split("/");

        let validPathLinks = [];

        validPathLinks.push({
            title: "Home",
            path: pathname.match(/admin/) ? "/admin" : "/",
        });

        pathLinks.forEach((linkText, index, array) => {
            if (!linkText?.match(/./)) {
                return;
            }

            if (excludeRegexMatch && excludeRegexMatch.test(linkText)) return;

            validPathLinks.push({
                title: lowerToTitleCase(linkText),
                path: (() => {
                    let path = "";

                    for (let i = 0; i < array.length; i++) {
                        const lnText = array[i];
                        if (i > index || !lnText.match(/./)) continue;

                        path += `/${lnText}`;
                    }

                    return path;
                })(),
            });
        });

        setLinks(validPathLinks);

        return function () {
            setLinks(null);
        };
    }, []);

    if (!links?.[1]) {
        return <React.Fragment></React.Fragment>;
    }

    return (
        <div
            className={twMerge(
                "overflow-x-auto max-w-[70vw]",
                "twui-current-breadcrumb-wrapper"
            )}
        >
            <Row className="gap-4 flex-nowrap whitespace-nowrap overflow-x-auto w-full">
                {links.map((linkObject, index, array) => {
                    const isTarget = array.length - 1 == index;

                    if (index === links.length - 1) {
                        return (
                            <Link
                                key={index}
                                href={linkObject.path}
                                className={twMerge(
                                    "text-slate-400 dark:text-slate-500 pointer-events-none text-xs",
                                    isTarget ? "current" : "",
                                    "twui-current-breadcrumb-link"
                                )}
                            >
                                {linkObject.title}
                            </Link>
                        );
                    } else {
                        return (
                            <React.Fragment key={index}>
                                <Link
                                    href={linkObject.path}
                                    className={twMerge(
                                        "text-xs",
                                        isTarget ? "current" : "",
                                        "twui-current-breadcrumb-link"
                                    )}
                                >
                                    {linkObject.title}
                                </Link>
                                <Divider vertical />
                            </React.Fragment>
                        );
                    }
                })}
            </Row>
        </div>
    );
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
}

/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */