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 settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
  mobileStateData,
} from "@sc/modules/page/Builder/Builder.stories";

import LiveFormField from "@sc/modules/v2/CRUD/FormBuilder/LiveFormField";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";
import Properties from "./Properties";
import FormField from "./component";

import oldFormFieldSettings from "@sc/plugins/webcomponents/v1/formField/settings";

export default {
  title: "Plugins|Web Components/Medium/Form Input Field",
  component: FormField,
  subcomponents: { LiveFormField },
  excludeStories: /.*Data$/,
};

export const Default: any = () => <LiveFormField type={FormFieldTypes.TEXT} />;

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

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

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

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

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