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

import AttributeContainer from "./AttributeContainer";
import { AttributeNames } from "./types";
import { LiveFormFieldProps } from "@sc/modules/v2/CRUD/FormBuilder/LiveFormField/types";

export default {
  title: "Modules|CRUD/AttributeBuilder/AttributeContainer",
  component: AttributeContainer,
  excludeStories: /.*data$/,
};

const generateId = () =>
  Math.random()
    .toString(36)
    .slice(2);

export const data = [
  {
    id: generateId(),
    attribute: AttributeNames.PLACEHOLDER,
    settings: {},
  },
  {
    id: generateId(),
    attribute: AttributeNames.DESCRIPTION,
    settings: { label: "Testing 1235" },
  },
  {
    id: generateId(),
    attribute: AttributeNames.INITIALVALUE,
    settings: {},
  },
  {
    id: generateId(),
    attribute: AttributeNames.LABEL,
    settings: { label: "Testing 1235" },
  },
  {
    id: generateId(),
    attribute: AttributeNames.FORMITEMNAME,
    settings: {},
  },
  {
    id: generateId(),
    attribute: AttributeNames.COLUMNS,
    settings: {},
  },
  {
    id: generateId(),
    attribute: AttributeNames.REQUIRED,
    settings: {},
  },
  {
    id: generateId(),
    attribute: AttributeNames.VALIDATIONCRITERIA,
    settings: {},
  },
  { id: generateId(), attribute: AttributeNames.ICON, settings: {} },
  { id: generateId(), attribute: AttributeNames.LINK, settings: {} },
  { id: generateId(), attribute: AttributeNames.PRESET, settings: {} },
];

export const Default: any = () => {
  const [attributes, setAttributes] = React.useState<LiveFormFieldProps>({
    placeholder: "Testing 123",
  });

  let newData = data;
  newData[2]["settings"] = { hide: true };
  newData[7]["settings"] = { hide: true };

  return (
    <AttributeContainer
      data={newData}
      attributes={attributes}
      onChange={(data) => {
        setAttributes(data);
        console.log({ data });
      }}
    />
  );
};

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