import {
    Action,
    IResourceItem,
    useParsed,
    useTranslate,
    generateDefaultDocumentTitle,
    useUserFriendlyName,
} from "@refinedev/core";
import React, { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

type Props = {
    handler?: (options: {
        resource?: IResourceItem;
        action?: Action;
        params?: Record<string, string | undefined>;
        pathname?: string;
        autoGeneratedTitle: string;
    }) => string;
};

export function DocumentTitleHandler({ handler }: Props) {
    const location = useLocation();
    const { action, id, params, pathname, resource } = useParsed();
    const translate = useTranslate();
    const getUserFriendlyName = useUserFriendlyName();

    const identifier = resource?.identifier ?? resource?.name;
    const resourceName =
        resource?.label ??
        resource?.meta?.label ??
        getUserFriendlyName(
            identifier,
            action === "list" ? "plural" : "singular",
        );

    useLayoutEffect(() => {
        const autoGeneratedTitle = generateDefaultDocumentTitle(
            translate,
            resource!,
            action,
            id + "",
            resourceName,
        );
        if (handler) {
            document.title = handler({
                action,
                resource,
                params,
                pathname,
                autoGeneratedTitle,
            });
        } else {
            document.title = autoGeneratedTitle;
        }
    }, [location]);

    return <></>;
}