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

import LineHeight from "./LineHeight";
import { lorem } from "@sc/plugins/misc/v2/blocks/weblayouts/utils";

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

export const Default: any = () => {
  const [style, setStyle] = React.useState({
    lineHeight: "13pt",
    padding: 50,
    margin: 30,
    // width: "90%",
  });

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

  return (
    <>
      <div style={{ display: "flex", width: "100%" }}>
        <div
          style={{
            border: "5px solid green",
            fontFamily: "Roboto",
            width: 500,
            ...style,
          }}
        >
          <pre
            style={{ textAlign: "center", background: "yellow", padding: 25 }}
          >
            {JSON.stringify(style)}
          </pre>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum,
            error quod ut, maiores dolores debitis laborum, rerum at omnis
            accusamus facere dicta harum temporibus.
          </p>

          <p>
            Molestias, minima. Maiores, inventore. Tempore atque blanditiis
            minima expedita vel modi illum natus quaerat, nulla necessitatibus,
            culpa explicabo molestias dignissimos animi possimus!
          </p>

          <p>
            Vitae, suscipit error nam sint animi reprehenderit commodi magnam
            culpa cumque voluptatem? Ipsa, numquam. Eius rerum illum quam est
            eos et nisi!
          </p>
        </div>
        <div style={{ margin: 30 }}>
          <LineHeight
            onChange={(lineHeight) => updateStyle(lineHeight)}
            showMaxCheck
            showAutoCheck
            showSlider
            style={style}
            // minValue={5}
            // maxValue={72}
          />
        </div>
      </div>
    </>
  );
};

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