import React from "react"; // that is needed for jsx to work
import { renderAsyncDocument } from "react-docx";
import * as Docx from "docx"; // that is a peer dependency

renderAsyncDocument(
  <section>
    <paragraph heading={Docx.HeadingLevel.HEADING_1}>
      You can pass props as if you are passing them to constructor
    </paragraph>
    <p>There are some helpful shortcuts for often used tags, like this</p>
    <p>
      <t>this one is for TextRun</t>
    </p>
    <p>
      For text inside anything else than t or textrun tags, TextRun is created
      under the hood
      <t break>
        For when docx objects have functional methods, you can pass function
        name as a prop. Prop value will be passed as an argument, if you need to
        pass many arguments use array instead.
      </t>
    </p>
    <p>
      Docx object is considered a tag if it has a constructor signature and is
      exported out of DOCX.js. Object key is then converted to lowercase.
      Everything you can make with raw DOCX.js(including mistakes), you can make
      here.
    </p>
    <p>
      <img
        src="base64 string or buffer object works"
        width={200}
        height={200}
      />
      <href
        src="http://localhost:8080"
        label={"For images and links shortcuts object are provided"}
      />
      This allows for removal of boilerplate for often used objects. In future
      more such object will be implemented.
    </p>
    <p>
      Sections are root tags for valid DOCX. If you want to have multiple
      sections, pass React Fragment with them to renderAsyncDocument.
    </p>
    <Component text="You can use components of course, just like in react!">
      <t>A child</t>
    </Component>
  </section>
).then((document) => console.log("This is rendered docx document", document));

const Component = ({ children, text }) => {
  const ref = React.useRef(null); // use can use refs to access docx objects
  React.useLayoutEffect(() => {
    // you can use LayoutEffect hook in combination with refs to write imperative code( hacks for example)
    console.log(ref.current);
    // because of useLayoutEffect nature it will work in single render as opposed to regular useEffect
  }, []);
  return (
    <p ref={ref}>
      <t>{text}</t>
      {children}
    </p>
  );
};

renderAsyncDocument(ReactElements, DocumentProperites, FileProperties);