import React, { useEffect, useMemo, useRef, useState } from "react";
import { ComponentStory } from "@storybook/react";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { RichText } from "./richText";
import { RichTextDocs } from "./richTextDocs";

export default {
  title: "Organism/RichText",
  component: RichText,
  args: {
    disabled: false,
    vertical: false,
  },
  parameters: {
    docs: {
      page: RichTextDocs,
    },
  },
};

export const Basic: ComponentStory<any> = args => {
  const editor = useRef(null);
  const [content, setContent] = useState("");
  const [placeholder, setPlaceholder] = useState("");

  const config = useMemo(() => {
    return {
      readonly: false, // all options from https://xdsoft.net/jodit/doc/,
      placeholder: placeholder || "Start typings...",
    };
  }, [placeholder]);

  return (
    <StoryLayout>
      <RichText
        placeholder={placeholder}
        editor={editor}
        value={content}
        config={config}
        setContent={setContent}
        tabIndex={1}
        {...args}
      />
    </StoryLayout>
  );
};

Basic.parameters = {
  docs: {
    storyDescription: "Базовый пример использования компонента",
  },
};

Basic.argTypes = {
  year: {
    options: ["2020", "2022"],
    control: { type: "select" },
  },
  title: {
    defaultValue: "Field name",
    control: {
      type: "text",
    },
  },
};