import { useMount, useUpdateEffect } from "react-use";
import { domToPng } from "modern-screenshot";

import { BadgeType } from "@/types/badge";
import { useState } from "react";

export const Preview = ({ badge }: { badge: BadgeType }) => {
  const [badgeUrl, setBadgeUrl] = useState("");

  useUpdateEffect(() => {
    setTimeout(() => {
      domToPng(
        document.getElementById("discotools-selected-badge") as HTMLElement,
        {
          scale: 2,
        }
      ).then(async (dataUrl) => {
        setBadgeUrl(dataUrl);
      });
    }, 190);
  }, [badge]);

  useMount(() => {
    setTimeout(() => {
      domToPng(
        document.getElementById("discotools-selected-badge") as HTMLElement,
        {
          scale: 2,
        }
      ).then(async (dataUrl) => {
        setBadgeUrl(dataUrl);
      });
    }, 100);
  });

  return (
    <div>{badgeUrl && <img src={badgeUrl} className="h-[19.25px]" />}</div>
  );
};