import { FC, useEffect, useState } from "react";
import QRCodeInternal from "react-qr-code";
import { Box } from "@mui/material";
import { colors } from "../styles/theme";

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

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

  useEffect(() => {
    if (getValue && refreshInterval) {
      const interval = setInterval(async () => {
        const result = await getValue(id);
        setValue(result);
      }, refreshInterval);
      return () => clearInterval(interval);
    }
  }, [getValue, refreshInterval]);

  return (
    <Box sx={{ backgroundColor: white, m: 2 }}>
      <QRCodeInternal value={value} />
      <Box>{helperText}</Box>
    </Box>
  );
};