import { setupI18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { OoAtelierDialog } from "../../src/components/OoAtelier";
import "../../src/styles.css";

const params = new URLSearchParams(location.search);
document.documentElement.dataset.theme = params.get("theme") === "dark" ? "dark" : "light";
const i18n = setupI18n({ locale: "en", messages: { en: {} } });

function Atelier() {
  const [value, setValue] = useState("oo1:c=FF781C;sp=cat;la=soft;ir=green;ew=round;hd=chef");
  return (
    <OoAtelierDialog
      open
      onOpenChange={() => undefined}
      value={value}
      identity="fixture"
      onChange={setValue}
      allowUpload
    />
  );
}

createRoot(document.getElementById("root")!).render(
  <I18nProvider i18n={i18n}>
    <main className="min-h-screen bg-background text-foreground">
      <Atelier />
    </main>
  </I18nProvider>,
);