"use client";

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/utils/utils"
import Link from "next/link";

const buttonVariants = cva(
    "inline-flex duration-300 items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
    {
        variants: {
            variant: {
                default: "bg-primary text-primary-foreground hover:bg-primary/90",
                destructive:
                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                outline:
                    "border-gray-300 border bg-lightBackground hover:bg-accent hover:text-foreground",
                secondary:
                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                ghost: "hover:bg-accent hover:text-accent-foreground",
                link: "text-primary underline-offset-4 hover:underline",
            },
            size: {
                default: "h-10 px-4 py-2",
                sm: "h-9 rounded-sm px-3",
                lg: "h-11 rounded-sm px-8",
                icon: "h-10 w-10",
            },
        },
        defaultVariants: {
            variant: "default",
            size: "default",
        },
    }
)

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    asChild?: boolean,
    isRedirection?: boolean,
    url?: string,
    link?: string,
}

declare global {
    function gtag(
        command: string,
        eventName: string,
        params?: Record<string, string | number | (() => void)>
    ): void;
}


const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ link, className, variant, size, isRedirection = true, url = process.env.NEXT_PUBLIC_CONTACT_URL, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";

    const onClickHandler = () => {
        if (isRedirection && url) {
            gtag_report_conversion(url);
            window.location.replace(url);
        }
    }


   const gtag_report_conversion = (url: string) => {
  const callback = function () {
    if (typeof url !== 'undefined') {
      console.log(url);
    }
  };

  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
    window.gtag('event', 'conversion', {
      send_to: 'AW-11537456477/9sh6COb9jZEaEN26vv0q',
      value: 1.0,
      currency: 'EUR',
      event_callback: callback,
    });
  } else {
    console.warn('gtag is not defined yet');
  }
};

    return (
        link ?
            <Link href={link} aria-label={link}>
                <Comp
                    className={cn(buttonVariants({ variant, size, className }))}
                    ref={ref}
                    {...props}
                />
            </Link>
            :
            <Comp
                onClick={onClickHandler}
                className={cn(buttonVariants({ variant, size, className }))}
                ref={ref}
                {...props}
            />
    )
}
)
Button.displayName = "Button"

export { Button, buttonVariants }