import * as React from 'react';
import styles from './SpfxReactRichtext.module.scss';
import { ISpfxReactRichtextProps } from './ISpfxReactRichtextProps';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { PrimaryButton, autobind } from 'office-ui-fabric-react';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

const modules = {
  toolbar: [
    [{ 'header': [1, 2, false] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
    ['link'],
    ['clean']
  ],
};

const formats = [
  'header',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link'
];

export interface ISpfxReactRichtextState {
  title: string;
  reactrichtext: string;
  place: string
}


export default class SpfxReactRichtext extends React.Component<ISpfxReactRichtextProps, ISpfxReactRichtextState> {
  constructor(props: ISpfxReactRichtextProps, state: ISpfxReactRichtextState) {
    super(props)
    sp.setup({ spfxContext: this.props.context });
    this.state = { title: '', reactrichtext: '', place: '' }
    this._getValuesFromSP();
  }



  public render(): React.ReactElement<ISpfxReactRichtextProps> {
    return (
      <div className={styles.spfxReactRichtext}>
        <TextField label="Name" value={this.state.title} onChanged={(newtext) => this.setState({ title: newtext })} />
        <br />
        <label>React rich text editor</label>
        <ReactQuill value={this.state.reactrichtext} theme="snow" modules={modules}
          formats={formats}
          onChange={(newvalue) => this.setState({ reactrichtext: newvalue })} />
        <TextField label="Place" value={this.state.place} onChanged={(newtext) => this.setState({ place: newtext })} />
        <br />
        <PrimaryButton text="Save" onClick={this._SaveIntoSP} />
      </div>
    );
  }

  private async _getValuesFromSP() {
    const item: any = await sp.web.lists.getByTitle("ReactRichText").items.getById(1).get();
    this.setState({ title: item.Title, reactrichtext: item.ReactRichText, place: item.Place })
  }

  @autobind
  private async _SaveIntoSP() {
    let list = sp.web.lists.getByTitle("ReactRichText");
    const i = await list.items.getById(1).update({
      Title: this.state.title,
      ReactRichText: this.state.reactrichtext,
      Place: this.state.place
    });
  }
}