import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { AppEnv, Model } from "../types/global";
import useTrans from "@/hooks/use-translations";
import { usePage } from "@inertiajs/react";
import { ExternalLinkIcon } from "lucide-react";
import str from "@/hooks/use-string";

interface Props {
    /** Current Model being edited */
    model?: Model;

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

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

    /** additionnal segment used in the url */
    additionalGroupPath?: string;

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

const GoToFrontView = (props: Props) => {
    const { model, modelName, pathField, additionalGroupPath = null, isAvailable = false } = props;
    if(!model) return;
   const { locale, url } = usePage().props.appEnv as AppEnv;

    const anchorAccessPage = useTrans("back.access_model", {
        params: {
            model: useTrans(`models.classes.${modelName}`, { choice: 1 }),
        },
    });

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

    return (
        <small className="flex flex-row justify-start items-center">
            {model && isAvailable ? (
                <>
                    {str(useTrans('back.access_to_front_page')).ucFirst().value()}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <a
                                href={definitivePath}
                                className="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"
                                target="_blank"
                                rel="noreferrer"
                            >
                                {definitivePath}{" "}
                                <ExternalLinkIcon size={12} />
                            </a>
                        </TooltipTrigger>
                        <TooltipContent>
                            {anchorAccessPage}
                        </TooltipContent>
                    </Tooltip>
                </>
            ) : (
                <>
                    {str(useTrans("back.access_to_front_page_when_published")).ucFirst().value()}:
                    <span className="italic ms-1">
                        {definitivePath}
                    </span>
                </>
            )}
        </small>
    )
}

export default GoToFrontView;