import { FC, useEffect, useState } from "react";
// @ts-ignore - react-qr-code doesn't have React 19 compatible types yet
import QRCodeInternal from "react-qr-code";
import { Box } from "@mui/material";
import { colors } from "../styles/theme";

type QRCodeProps = {
  name: string;
  label: string;
  token: string;
  verified: boolean;
  helperText?: string;
  getValue?: (id: string) => Promise<Record<string, string>>;
  refreshInterval?: number;
};

export const QRCode: FC<QRCodeProps> = ({
  name,
  label,
  token,
  verified,
  helperText,
  getValue,
  refreshInterval,
}) => {
  const [value, setValue] = useState("");
  const [kind, setKind] = useState("data");
  const { white } = colors;

  useEffect(() => {
    if (!verified && getValue && refreshInterval) {
      // Fetch immediately on mount
      const fetchQR = async () => {
        const { qr, kind } = await getValue(token);
        setValue(qr);
        setKind(kind);
      };
      fetchQR();

      // Then set up interval for refreshes
      const interval = setInterval(fetchQR, refreshInterval * 1000);
      return () => clearInterval(interval);
    }
  }, [getValue, refreshInterval, token, verified]);

  return !verified ? (
    <Box sx={{ backgroundColor: white, m: 2 }}>
      {value ? (
        kind === "data" ? (
          <QRCodeInternal value={value} />
        ) : (
          <img src={value} alt={name} />
        )
      ) : (
        <Box>Loading QR code...</Box>
      )}
      <Box>{helperText}</Box>
    </Box>
  ) : null;
};