// * Packages
import { usePage } from "@inertiajs/react";
import { ExternalLinkIcon } from "lucide-react";
// * Components shadcn
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
// * Other
import { AppEnv } from "@/back/types/global";
import useTrans from "@/hooks/use-translations";
import str from "@/hooks/use-string";
import { cn } from "@/lib/utils";

interface GoToFrontViewProps {
    /** Model Name used to translate the helper */
    modelName: string;

     /** Field data to build path */
    pathField: string;

    /** Additionnal segment used in the url */
    additionalGroupPath?: string|null;

    /** Does the actual page status available in front */
    isAvailable?: boolean;

    /** Set visually in column */
    isColumn?: boolean,

    /** Add locale to the url */
    addLocale?: boolean,
}

export default function GoToFrontView({
    modelName,
    pathField,
    additionalGroupPath = null,
    isAvailable = false,
    isColumn = false,
    addLocale = true,
}: GoToFrontViewProps) {
    const { locale, url } = usePage().props.appEnv as AppEnv;

    const anchorAccessPage = useTrans("back.access_model", {
        params: {
            model: modelName,
        },
    });

    const cleanUrl = url.endsWith("/") ? url.slice(0, -1) : url;

    const definitivePath = [
        cleanUrl + (addLocale ? (locale === "fr" ? '' : '/' + locale) : ''),
        additionalGroupPath,
        pathField,
    ]
        .filter(Boolean)
        .join("/");

    return (
        <small className={`flex ${isColumn ? 'flex-col items-start' : 'flex-row items-center'} justify-start`}>
            {isAvailable ? (
                <>
                    {str(useTrans('back.access_to_front_page', {
                        params: {
                            model: modelName,
                        },
                    })).ucFirst().value()}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <a
                                href={definitivePath}
                                className={cn(
                                    "flex justify-center items-center rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 underline-offset-4 hover:underline text-blue-600 hover:text-blue-600/80 visited:text-purple-600 w-fit gap-1.5",
                                    { "ms-1": !isColumn }
                                )}
                                target="_blank"
                                rel="noreferrer"
                            >
                                <p className="flex-1">{definitivePath}</p>
                                <ExternalLinkIcon size={12} />
                            </a>
                        </TooltipTrigger>
                        <TooltipContent>
                            {anchorAccessPage}
                        </TooltipContent>
                    </Tooltip>
                </>
            ) : (
                <>
                    {str(useTrans("back.access_to_front_page_when_published", {
                        params: {
                            model: modelName,
                        },
                    })).ucFirst().value()}:
                    <span className="italic ms-1">
                        {definitivePath}
                    </span>
                </>
            )}
        </small>
    )
}