import React, { useState, useEffect } from 'react';
import { Dimensions, View } from 'react-native';
import { JoyDoc, getDefaultDocument } from '@joyfill/components-react-native';

const screenWidth = Dimensions.get('window').width;

const template = <PASTE_JSON_TEMPLATE>

function Document() {

  const [doc, setDoc] = useState(template);

  return (
    <View style={{flex: 1}}>
      <JoyDoc
        mode="fill"
        doc={doc}
        width={screenWidth}
        onChange={(changelogs, doc) => {
          console.log('onChange doc: ', doc);
          setDoc(doc);
        }}
        onUploadAsync={async (params) => {
          // Add your picker/upload handler and return { url, fileName, filePath } objects.
          console.log('onUploadAsync: ', params);
          return []; // No file selected; leave the document unchanged.
        }}
      />
    </View>
  );
}

export default Document;