import React, { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';
import { retrieveTemplate } from '../api.js';

import { JoyDoc } from '@joyfill/components-react-native';

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

function App() {

  const [ template, setTemplate ] = useState(null);

  /**
   * Add your template identifier
   */
  const identifier = '<REPLACE_WITH_TEMPLATE_IDENIFIER>';

  /**
   * Retrieve template via the Joyfill API 
   */
  useEffect(() => {

    const handleRetrieveTemplate = async () => {
      const response = await retrieveTemplate(identifier);
      setTemplate(response);
    };

    handleRetrieveTemplate();

  }, []);

  return (
    <JoyDoc
      mode="fill"
      doc={template}
      width={screenWidth}
      onChange={(changelogs, doc) => {

        /**
         * Changelogs represent the individual change that was made
         * Data represents the entire data structure with all new changes applied.
         */
        console.log('>>>>>>>>: ', changelogs, doc);

      }}
    />
  );

}

const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
const apiBaseUrl = "https://api-joy.joyfill.io";

export const retrieveTemplate = async (identifier) => {

  //See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
  const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
    method: 'GET',
    mode: 'cors',
    headers: {
      Authorization: `Bearer ${userAccessToken}`,
      'Content-Type': 'application/json'
    },
  });

  const data = await response.json();
  return data;
}