"use client"

import { useIntl } from "react-intl"

import { trpc } from "@/lib/trpc/client"

import Refresh from "@/components/Icons/Refresh"
import { Loading } from "@/components/Loading"
import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"

import styles from "./levelupgradebutton.module.css"

export function LevelUpgradeButton() {
  const intl = useIntl()

  const { mutate, isPending } =
    trpc.partner.sas.performLevelUpgrade.useMutation({
      onSuccess() {
        toast.success(intl.formatMessage({ id: "Level upgraded" }))
      },
      onError() {
        toast.error(intl.formatMessage({ id: "Failed to upgrade level" }))
      },
    })

  const handleClick = () => {
    mutate()
  }

  return (
    <>
      <Button
        intent="primary"
        theme="primaryLight"
        onClick={handleClick}
        className={styles.button}
      >
        <div
          className={styles.textContainer}
          style={{ visibility: isPending ? "hidden" : "visible" }}
        >
          <Refresh color="currentColor" />
          {intl.formatMessage({ id: "Check for level upgrade" })}
        </div>
        {isPending && <Loading color="white" className={styles.loading} />}
      </Button>
    </>
  )
}