//Generic Dependencies
import * as React from 'react';
import { StatusBar, View } from 'react-native';

// React native webview quill
import { DeltaStatic, providerRegistry, Quill } from 'react-native-webview-quill';
import { WebView } from 'react-native-webview-quill/src/providers/WebView/ReactNative/index';

// Only once: Set the webview implementation to use
// Should be done once, probably in your index.js
providerRegistry.WebViewProvider = WebView;

// This is a example of a QuillDelta object that describes the
// content and formatting of the richtext editor
// More information at https://quilljs.com/docs/delta/
const defaultOps: DeltaStatic = {
  ops: [
    {
      insert: 'Test',
      attributes: {
        bold: true,
      },
    },
  ],
};

export default class App extends React.Component<{}, { content: DeltaStatic }> {
  constructor(props: any) {
    super(props);
    this.state = {
      content: defaultOps,
    };
  }

  public render() {
    //Render a full screen quill editor
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: StatusBar.currentHeight }} />
        <Quill
          content={
            /* the initial content */
            this.state.content
          }
          onContentChange={
            /* Callend when an edit is made */
            this.onContentChange
          }
          containerStyle={
            /*The style passed to the editor container*/
            { flex: 1 }
           }
        />
      </View>
    );
  }

  private onContentChange = (content: DeltaStatic) => {
    // Save this content
    this.setState({ content });
  };
}