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

import StyleBuilder from "./StyleBuilder";

export default {
  title: "Modules|Properties/Individual Properties/Style Builder (Adv)",
  component: StyleBuilder,
  excludeStories: /.*Data$/,
};

export const Default: any = () => {
  const [style, setStyle] = React.useState({
    margin: 15,
    padding: 20,
    width: 300,
    height: 200,
    background: "#CCFFCC",
    border: "5px solid green",
  });

  const updateStyle = (property) => {
    setStyle({ ...style, ...property });
  };

  return (
    <>
      <div style={{ padding: 30, width: 500 }}>
        <div
          style={{
            border: `1px dotted red`,
            backgroundColor: `rgb(255, 0, 0, 0.25)`,
          }}
        >
          <div style={style}>
            <div
              style={{
                fontFamily: "Courier New",
                padding: 10,
                overflowWrap: "break-word",
              }}
            >
              {JSON.stringify(style)}
            </div>
          </div>
        </div>

        <StyleBuilder
          style={style}
          onChange={(newStyle) => updateStyle(newStyle)}
        />
      </div>
    </>
  );
};