import * as React from "react";
import PropertiesBuilder from "./Generator";
import { SectionTypes } from "@sc/modules/v2/Properties/types";
import { BrowserRouter as Router } from "react-router-dom";
import {
  withKnobs,
  // text,
  // object,
  boolean,
  // select,
} from "@storybook/addon-knobs";
// import * as Tools from "@sc/modules/page/Builder/Properties";

// import Dropzone from "react-dropzone";
export default {
  title: "Modules|Properties/Property Generator",
  component: PropertiesBuilder,
  decorators: [withKnobs],
  excludeStories: /.*Data$/,
};

export const sidebarData = {
  main: {
    tabs: ["Basic", "Advanced"],
    sections: [
      ...(boolean(SectionTypes.BUTTONGROUP, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.BUTTONGROUP,
              settings: {
                data: [
                  { id: "line1", label: "Line 1" },
                  { id: "line2", label: "Line 2" },
                ],
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.UPLOADGROUP, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.UPLOADGROUP,
              settings: {
                createMediaItem: (item) => {
                  console.log("createMediaItem() called", item);
                },
                uploadURLToS3: (item) => {
                  console.log("uploadURLToS3() called", item);
                },
                // settings: {},
                url:
                  "https://www.visioncritical.com/hubfs/Imported_Blog_Media/BLG_Andrew-G_-River-Sample_09_13_12.png", // current url of object
                accept: "image/jpeg, image/png",
                highlighted: true,
                onChange: (files) => {
                  console.log(files);
                },
                isExpanded: true,
                label: "Upload New Item",
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.TYPOGRAPHY, false, "Basic")
        ? [
            {
              tab: "Basic",
              // group: "line1",
              type: SectionTypes.TYPOGRAPHY,
              settings: {
                // label: "Button Text",
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.BACKGROUND, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.BACKGROUND,
              settings: {
                // label: "Button Text",
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.COLORPICKER, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.COLORPICKER,
              settings: {
                label: "Color Picker",
                icon: "colorize",
              },
              sectionWrap: true,
            },
          ]
        : []),
      ...(boolean(SectionTypes.POSITIONPADDING, false, "Basic")
        ? [
            {
              tab: "Basic",
              // group: "line1",
              type: SectionTypes.POSITIONPADDING,
              settings: {},
            },
          ]
        : []),

      ...(boolean(SectionTypes.ALIGNMENT, false, "Basic")
        ? [
            {
              tab: "Basic",
              // group: "line1",
              type: SectionTypes.ALIGNMENT,
              settings: {},
            },
          ]
        : []),
      ...(boolean(SectionTypes.CAPTION, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.CAPTION,
              sectionWrap: true,
              settings: {
                label: "Your Caption",
                icon: "format_size",
                isExpanded: true,
                text: "Caption Goes Here",
                value: "This is a test",
                onChange: (value) => console.log(value),
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.CUSTOM, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.CUSTOM,
              sectionWrap: true,
              settings: {
                label: "Custom Section",
                icon: "description",
                isExpanded: true,
                component: () => <div>This is a custom component!!!!</div>,
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.BUTTONSLIDER, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.BUTTONSLIDER,
              sectionWrap: true,
              settings: {
                label: "Custom Button Slider",
                icon: "android",
                onChange: (e) => console.log(e),
                text: "Simple Button Slider",
                button1: { icon: "remove", value: "SHRINK" },
                button2: { icon: "add", value: "GROW" },
                minValue: 10,
                maxValue: 1000,
                value: 500,
                originalValue: 100,
                showAutoCheck: false,
                autoCheckValue: 10,
              },
            },
          ]
        : []),
      ...(boolean(SectionTypes.ACTIONS, false, "Advanced")
        ? [
            {
              tab: "Advanced",
              type: SectionTypes.ACTIONS,
              settings: {},
            },
          ]
        : []),
      ...(boolean(SectionTypes.BORDERSSHADOW, false, "Advanced")
        ? [
            {
              tab: "Advanced",
              type: SectionTypes.BORDERSSHADOW,
              settings: {
                isExpanded: true,
              },
            },
          ]
        : []),

      ...(boolean(SectionTypes.SPACING, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.SPACING, settings: {} }]
        : []),
      ...(boolean(SectionTypes.WIDTH, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.WIDTH, settings: {} }]
        : []),
      ...(boolean(SectionTypes.HEIGHT, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.HEIGHT, settings: {} }]
        : []),
      ...(boolean(SectionTypes.WIDTHHEIGHT, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.WIDTHHEIGHT, settings: {} }]
        : []),
      ...(boolean(SectionTypes.LINEHEIGHT, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.LINEHEIGHT, settings: {} }]
        : []),
      ...(boolean(SectionTypes.MARGIN, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.MARGIN, settings: {} }]
        : []),
      ...(boolean(SectionTypes.PADDING, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.PADDING, settings: {} }]
        : []),
      ...(boolean(SectionTypes.POSITION, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.POSITION, settings: {} }]
        : []),
      ...(boolean(SectionTypes.FANCYSELECTOR, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.FANCYSELECTOR,
              settings: {},
            },
          ]
        : []),
      ...(boolean(SectionTypes.STYLEBUILDER, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.STYLEBUILDER, settings: {} }]
        : []),
      ...(boolean(SectionTypes.PRESETS, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.PRESETS, settings: {} }]
        : []),
      ...(boolean(SectionTypes.PREVIEW, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.PREVIEW, settings: {} }]
        : []),
      ...(boolean(SectionTypes.MOBILETOGGLE, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.MOBILETOGGLE, settings: {} }]
        : []),
      ...(boolean(SectionTypes.DATATABLE, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.DATATABLE, settings: {} }]
        : []),
      ...(boolean(SectionTypes.ICONSELECTOR, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.ICONSELECTOR, settings: {} }]
        : []),
      ...(boolean(SectionTypes.LISTSORTABLE, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.LISTSORTABLE, settings: {} }]
        : []),
      ...(boolean(SectionTypes.CUSTOM, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.CUSTOM, settings: {} }]
        : []),
      ...(boolean(SectionTypes.SECTION, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.SECTION, settings: {} }]
        : []),
      ...(boolean(SectionTypes.LINKDROPDOWN, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.LINKDROPDOWN, settings: {} }]
        : []),
      ...(boolean(SectionTypes.OBJECTPRESETS, false, "Advanced")
        ? [
            {
              tab: "Advanced",
              type: SectionTypes.OBJECTPRESETS,
              settings: {},
            },
          ]
        : []),
      ...(boolean(SectionTypes.DROPDOWNCOLLAPSE, false, "Basic")
        ? [
            {
              tab: "Basic",
              type: SectionTypes.DROPDOWNCOLLAPSE,
              settings: {},
            },
          ]
        : []),
      ...(boolean(SectionTypes.ICON, false, "Basic")
        ? [{ tab: "Basic", type: SectionTypes.ICON, settings: {} }]
        : []),
      ...(boolean(SectionTypes.RICHEDITOR, false, "Advanced")
        ? [{ tab: "Advanced", type: SectionTypes.RICHEDITOR, settings: {} }]
        : []),
    ],
  },
};

export const Default: React.FC = () => {
  return (
    <Router>
      <PropertiesBuilder
        data={sidebarData}
        settings={{ properties: { fontFamily: "Roboto", fontSize: "14pt" } }}
      />
    </Router>
  );
};