import * as React from "react";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";
import {
  withKnobs,
  text,
  object,
  boolean,
  select,
} from "@storybook/addon-knobs";

// import { action } from "@storybook/addon-actions";

import LoadComponent from "./LoadComponent";
import { EditorMode } from "@sc/modules/v2/Editor/types";

export default {
  title: "Modules|Editor/LoadComponent",
  component: LoadComponent,
  excludeStories: /.*Data$/,
  decorators: [withKnobs],
};

export const settingsData = {
  id: "testing",
  style: { color: "green", fontSize: "18pt", textAlign: "center" },
  children: "This is a test",
  // parent: false,
};

export const Default = () => {
  const mode: any = select("MODE", EditorMode, EditorMode.LIVE);
  return (
    <LoadComponent
      type={select("Component To Load", ComponentTypes, ComponentTypes.TEXT)}
      settings={object("Settings", settingsData)}
      mode={mode}
    />
  );
};

Default.story = {
  parameters: {
    jest: ["LoadComponent"],
  },
};