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

import Spacing from "./Spacing";

export default {
  title: "Modules|Properties/Individual Properties/Spacing",
  component: Spacing,
  excludeStories: /.*Data$/,
};

export const Default: any = () => {
  const [style, setStyle] = React.useState({
    marginTop: 15,
    marginRight: 15,
    marginBottom: 15,
    marginLeft: 15,
    paddingTop: 15,
    paddingRight: 15,
    paddingBottom: 15,
    paddingLeft: 15,
    // width: "50%",
  });

  const updateStyle = (property) => {
    // console.log("updateStyle", property);
    setStyle({ ...style, ...property });
  };

  return (
    <>
      <div style={{ padding: 30, width: 500, float: "right" }}>
        <div
          style={{
            border: `1px dotted red`,
            backgroundColor: `rgb(255, 0, 0, 0.25)`,
          }}
        >
          <div
            style={{
              background: "#CCFFCC",
              border: "5px solid green",
              ...style,
            }}
          >
            <div
              style={{
                fontFamily: "Courier New",
                padding: 10,
                overflowWrap: "break-word",
              }}
            >
              {JSON.stringify(style)}
            </div>
          </div>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 0, left: 0, margin: 20 }}>
        <Spacing onChange={(spacing) => updateStyle(spacing)} style={style} />
      </div>
    </>
  );
};

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