import * as React from "react";
import Popup from "./component";
// import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";
// import { QUIZ_STANDARD } from "@sc/lsvt/src/blocks/QUIZ_STANDARD";

import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";

export default {
  title: "Plugins|Web Components/Moderate/Popup Window",
  component: Popup,
};

export const Default: React.FC = () => {
  const [isPopupOpen, setIsPopupOpen] = React.useState(false);
  return (
    <div>
      <Popup
        open={isPopupOpen}
        setOpen={setIsPopupOpen}
        style={{ padding: 30 }}
      >
        {/* <QUIZ_STANDARD /> */}
        This is a test!
      </Popup>
      <button onClick={() => setIsPopupOpen(true)}>Open Popup Window</button>
    </div>
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};