import { withA11y } from "@storybook/addon-a11y";
import { addDecorator, storiesOf } from "@storybook/react";
import React, { useEffect, useState } from "react";

import {
  DefaultInputSection,
  defaultShapeStyle,
  ReactPictureAnnotation,
} from "../src";
import { IAnnotation } from "../src/Annotation";
import { IShapeData } from "../src/Shape";

addDecorator((storyFn) => <div>{storyFn()}</div>);

storiesOf("Hello World", module)
  .addDecorator(withA11y)
  .add("with text", () => {
    const AnnotationComponent = () => {
      const [size, setSize] = useState({
        width: window.innerWidth - 16,
        height: window.innerHeight - 16,
      });

      const [annotationData, setAnnotationData] = useState<
        IAnnotation<IShapeData>[]
      >([
        {
          id: "a",
          comment: "HA HA HA",
          mark: {
            type: "RECT",
            width: 161,
            height: 165,
            x: 229,
            y: 92,
          },
        },
      ]);

      const [selectedId, setSelectedId] = useState<string | null>("a");

      const onResize = () => {
        setSize({
          width: window.innerWidth - 16,
          height: window.innerHeight - 16,
        });
      };

      useEffect(() => {
        window.addEventListener("resize", onResize);
        return () => {
          window.removeEventListener("resize", onResize);
        };
      }, []);

      return (
        <ReactPictureAnnotation
          width={size.width}
          height={size.height}
          annotationData={annotationData}
          onChange={(data) => setAnnotationData(data)}
          selectedId={selectedId}
          onSelect={(e) => setSelectedId(e)}
          annotationStyle={{
            ...defaultShapeStyle,
            shapeStrokeStyle: "#2193ff",
            transformerBackground: "black",
          }}
          defaultAnnotationSize={[120, 90]}
          image="https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/60682895_p0_master1200.jpg"
          inputElement={(value, onChange, onDelete) => (
            <DefaultInputSection
              placeholder={"Hello world"}
              {...{ value, onChange, onDelete }}
            />
          )}
        />
      );
    };

    return <AnnotationComponent />;
  });