import * as React from "react";
import { action } from "@storybook/addon-actions";
import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
// import ReactJson from "react-json-view";

import { ReactStory } from "storybook/types";

import EditFormField from "./EditFormField";
import { FormFieldTypes } from "../types";

export default {
  title: "Modules|CRUD/FormBuilder/Loaders/EditFormField",
  component: EditFormField,
  excludeStories: /.*Data$/,
  decorators: [withKnobs],
};

export const Default: ReactStory = () => {
  const [attributes, setAttributes] = React.useState({});
  const [type, setType] = React.useState<FormFieldTypes | boolean>(false);

  return (
    <>
      <div style={{ padding: 100, width: 500, float: "left" }}>
        <EditFormField
          id="test"
          fieldData={attributes}
          // onChange={setAttributes}
          onBlur={setAttributes}
          onTypeChange={(type, attr = false) => {
            console.log({ type, attr });
            setType(type);
            if (attr) setAttributes({ ...attributes, ...attr });
          }}
          type={type}
          isExpanded={type ? true : false}
        />
      </div>
      <div style={{ padding: 100, float: "left" }}>
        {/* <ReactJson src={attributes} /> */}
      </div>
    </>
  );
};

export const Expanded: ReactStory = () => {
  const [attributes, setAttributes] = React.useState({});
  const [type, setType] = React.useState<FormFieldTypes>(FormFieldTypes.TEXT);
  return (
    <div style={{ padding: 100 }}>
      <EditFormField
        id="test"
        isExpanded
        fieldData={attributes}
        // onChange={setAttributes}
        onBlur={setAttributes}
        onTypeChange={setType}
        type={type}
        showFieldset
      />
    </div>
  );
};

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