import * as React from 'react';
import styles from './ReactNew.module.scss';
import { IReactNewProps } from './IReactNewProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp, { sp, Web } from 'sp-pnp-js';

export default class ReactNew extends React.Component<IReactNewProps, any> {
  constructor(props) {
    super(props);
    this.state = {
      checkboxs: {
        checkbox1: false,
        checkbox2: false,
        checkbox3: false,
        checkbox4: false,
      }
    }
    this.handle = this.handle.bind(this);
    this._addListItem = this._addListItem.bind(this);
  }
  public render(): React.ReactElement<IReactNewProps> {
    return (
      <div className={styles.reactNew}>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
              <span className={styles.title}>Welcome to SharePoint!</span>
              <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
              <p className={styles.description}>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={styles.button}>
                <span className={styles.label}>Learn more123</span>
              </a>
            </div>
          </div>
        </div>
        <input type="checkbox" value="checkbox1" onClick={this.handle} /> checkbox1<br />
        <input type="checkbox" value="checkbox2" onClick={this.handle} /> checkbox2<br />
        <input type="checkbox" value="checkbox3" onClick={this.handle} /> checkbox3<br />
        <input type="checkbox" value="checkbox4" onClick={this.handle} /> checkbox4<br />
        <input type="button" onClick={this._addListItem} value="submit" />
      </div>
    );
  }

  componentDidMount() {

  }
  private handle(event) {
    
    let value = event.target.value;
    let { checkboxs } = this.state;
    checkboxs[value] = event.target.checked;   
    this.setState({ checkboxs });
  }
 
  private _addListItem() {
    let { checkboxs } = this.state;
    let cks = [];
    for (let key in checkboxs) {
      if (checkboxs[key]) {
        cks.push(key.toString())
      }
    }
    
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);
    web.lists.getByTitle("test").items.add({
      Title: "Title",
      cks: {
        results: cks
      }
    }).then(response=>console.log(response));
   
  }

}