import { User } from "@clerk/remix/api.server";
import { useLoaderData } from "@remix-run/react";
import { CreditCard } from "lucide-react";
import { FC } from "react";
import { AppLayoutLoader } from "~/types/AppLayoutLoader.types";
import { Dialog, DialogContent, DialogTrigger } from "../../ui/dialog";

type ApiKeysDialogProps = {
  user: User;
};

export const BillingDialog: FC<ApiKeysDialogProps> = ({ user }) => {
  const { customerSession, stripePublishableKey, pricingTableId } = useLoaderData<AppLayoutLoader>();
  return (
    <Dialog>
      <DialogTrigger asChild>
        <div
          className={"hover:bg-muted flex cursor-pointer items-center rounded-xl px-2.5 py-2 dark:hover:bg-[#151218]"}
        >
          <div className={"flex w-8 justify-center"}>{<CreditCard className={"text-muted-foreground h-4 w-4"} />}</div>
          <span className="text-muted-foreground ml-1.5 whitespace-nowrap text-sm">Billing</span>
        </div>
      </DialogTrigger>

      <DialogContent className="absolute w-[700px] max-w-[700px]">
        <stripe-pricing-table
          pricing-table-id={pricingTableId}
          publishable-key={stripePublishableKey}
          customer-session-client-secret={customerSession.client_secret}
          client-reference-id={user.id}
        ></stripe-pricing-table>
      </DialogContent>
    </Dialog>
  );
};

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "stripe-pricing-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}
