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

import FormBuilder from "./FormBuilder";

import { FormFieldTypes } from "./types";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";
import { LiveFormFieldProps } from "./LiveFormField/types";
import { EditorMode } from "../../Editor/types";
import { IListItem } from "./FormFields/types";
import { FieldNamePresets } from "./EditFormField/types";

export const styleData = {
  labelStyle: {
    padding: 5,
    fontWeight: "bold",
    fontSize: "10pt",
    color: `rgb(102,102,102)`,
  },
  inputStyle: {
    padding: 15,
    // paddingLeft: 40,
    fontSize: "11pt",
    width: "100%",
    border: "none",
    background: `rgb(238,238,238)`,
    borderRadius: 10,
    marginTop: 5,
  },
  descriptionStyle: { padding: 5, fontSize: "10pt", color: `rgb(102,102,102)` },
  containerStyle: { padding: 20, margin: 10 },
  iconStyle: { fontSize: "18pt", color: "#333", padding: 10, marginTop: 7 },
  validationStyle: {},
};

export default {
  title: "Modules|CRUD/FormBuilder",
  component: FormBuilder,
  excludeStories: /.*Data$/,
};

export const itemData: IListItem[] = [
  { id: "1", label: "Kyle" },
  { id: "2", label: "Linda" },
  { id: "3", label: "Mikel" },
  { id: "4", label: "Nevaeh" },
];

export const defaultData: LiveFormFieldProps[] = [
  {
    id: "12sfd3",
    type: FormFieldTypes.TEXT,
    name: "MyTextBox",
    placeholder: "Placeholder Test",
    label: "Text Label",
    description: "Text Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  {
    id: "22sfd3",
    type: FormFieldTypes.PASSWORD,
    name: "MyPasswordBox",
    placeholder: "Placeholder Test",
    label: "Password Label",
    description: "Password Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  {
    id: "3afs23",
    type: FormFieldTypes.CHECKBOXES,
    name: "MyCheckboxesBox",
    placeholder: "Placeholder Test",
    label: "Checkboxes Label",
    description: "Checkboxes Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    items: itemData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  {
    id: "4fas32",
    type: FormFieldTypes.TEXTAREA,
    name: "MyTextareaBox",
    placeholder: "Placeholder Test",
    label: "Textarea Label",
    description: "Textarea Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  {
    id: "5fsa34",
    type: FormFieldTypes.SELECT,
    name: "MySelectBox",
    placeholder: "Placeholder Test",
    label: "Select Label",
    description: "Select Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    items: itemData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  {
    id: "63fsdf2",
    type: FormFieldTypes.DATE,
    name: "MyDateBox",
    placeholder: "Placeholder Test",
    label: "Date Label",
    description: "Date Description",
    defaultValue: "2020-06-26",
    // styles: styleData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  // {
  //   id: "7asdf32",
  //   type: FormFieldTypes.CONTENT,
  //   name: "MyContentBox",
  //   placeholder: "Placeholder Test",
  //   label: "Content Label",
  //   description: "Content Description",
  //   defaultValue: "Testing Default Value",
  //   // styles: styleData,
  //   icon: IconTypes.Email,
  //   columns: 12,
  //   preset: FieldNamePresets.CUSTOM,
  // },
  {
    id: "83ffas2",
    type: FormFieldTypes.NUMBER,
    name: "MyNumberBox",
    placeholder: "Placeholder Test",
    label: "Number Label",
    description: "Number Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    icon: IconTypes.Email,
    columns: 6,
    preset: FieldNamePresets.CUSTOM,
  },
  // {
  //   id: "93asdf2",
  //   type: FormFieldTypes.CURRENCY,
  //   name: "MyCurrencyBox",
  //   placeholder: "Placeholder Test",
  //   label: "Currency Label",
  //   description: "Currency Description",
  //   defaultValue: "Testing Default Value",
  //   // styles: styleData,
  //   icon: IconTypes.Email,
  //   columns: 6,
  // preset: 'custom',
  // },
  {
    id: "10dfs1",
    type: FormFieldTypes.DROPDOWN,
    name: "MyDropDownBox",
    placeholder: "Placeholder Test",
    label: "DropDown Label",
    description: "DropDown Description",
    defaultValue: "Testing Default Value",
    // styles: styleData,
    items: itemData,
    icon: IconTypes.Email,
    columns: 12,
    preset: FieldNamePresets.CUSTOM,
  },
  // {
  //   id: "1asdf11",
  //   type: FormFieldTypes.MULTIPLECHOICE,
  //   name: "MyMultipleChoiceBox",
  //   placeholder: "Placeholder Test",
  //   label: "MultipleChoice Label",
  //   description: "MultipleChoice Description",
  //   defaultValue: "Testing Default Value",
  //   // styles: styleData,
  //   items: itemData,
  //   icon: IconTypes.Email,
  //   columns: 12,
  // preset: 'custom',
  // },
  // {
  //   id: "1sadf22",
  //   type: FormFieldTypes.TYPOGRAPHY,
  //   name: "MyTypographyBox",
  //   placeholder: "Placeholder Test",
  //   label: "Typography Label",
  //   description: "Typography Description",
  //   defaultValue: "Testing Default Value",
  //   // styles: styleData,
  //   icon: IconTypes.Email,
  //   columns: 12,
  // preset: 'custom',
  // },
  // {
  //   id: "13fsdaf3",
  //   type: FormFieldTypes.FILEUPLOAD,
  //   name: "MyFileUploadBox",
  //   placeholder: "Placeholder Test",
  //   label: "FileUpload Label",
  //   description: "FileUpload Description",
  //   defaultValue: "Testing Default Value",
  //   // styles: styleData,
  //   icon: IconTypes.Email,
  //   columns: 12,
  // preset: 'custom',
  // },
  // {
  //   id: "14safd3",
  //   type: FormFieldTypes.LINEARSCALE,
  //   name: "MyLinearScaleBox",
  //   placeholder: "Placeholder Test",
  //   label: "LinearScale Label",
  //   description: "LinearScale Description",
  //   defaultValue: "Testing Default Value",
  //   // styles: styleData,
  //   icon: IconTypes.Email,
  //   columns: 12,
  // preset: 'custom',
  // },
];

export const Live: any = () => (
  <FormBuilder
    data={defaultData}
    globalFieldStyle={styleData}
    mode={EditorMode.LIVE}
  />
);

export const Editor: any = () => {
  const [data, setData] = React.useState<LiveFormFieldProps[]>(defaultData);

  return (
    <FormBuilder
      data={data}
      onChange={(newData) => {
        console.log(newData);
        setData(newData);
      }}
      globalFieldStyle={styleData}
      mode={EditorMode.EDITOR}
    />
  );
};

Live.story = {
  parameters: {
    jest: ["FormBuilder"],
  },
};