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

import Margin from "./Margin";

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

export const Default: any = () => {
  const [style, setStyle] = React.useState({
    margin: 50,
    padding: 100,
    // width: 500,
  });

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

  return (
    <>
      <div
        style={{
          // margin: "30px auto",
          background: "yellow",
          border: "5px solid green",
          color: "red",
          fontWeight: "bold",
          fontFamily: "Roboto",
          textAlign: "center",
          ...style,
        }}
      >
        {JSON.stringify(style)}
      </div>

      <Margin
        onChange={(margin) => updateStyle(margin)}
        showMaxCheck
        showAutoCheck
        showSlider
        style={style}
        minValue={0}
        maxValue={100}
      />
    </>
  );
};

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