import * as React from "react";
import { action } from "@storybook/addon-actions";
import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
import { BrowserRouter as Router } from "react-router-dom";

import { EditorMode } from "@sc/modules/v2/Editor/types";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";

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

import settings from "./settings";
import Properties from "./Properties";
import { FormBuilder } from "@sc/modules/v2/CRUD/FormBuilder";
import {
  defaultData,
  styleData,
} from "@sc/modules/v2/CRUD/FormBuilder/FormBuilder.stories";

// import FormBuilder from "./live";

export default {
  title: "Plugins|Web Components/Medium/Form Builder",
  component: FormBuilder,
  excludeStories: /.*Data$/,
};

export const Default: any = () => (
  <FormBuilder data={defaultData} globalFieldStyle={styleData} />
);

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

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      defaultMobileState={mobileStateData.desktop}
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};

export const PropertyWindow: any = () => (
  <Router>
    <Properties settings={settings} id="" mode={EditorMode.EDITOR} />
  </Router>
);

PropertyWindow.story = {
  parameters: {
    jest: ["Properties"],
  },
};