import { Component, OnInit } from '@angular/core';
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import IWebPartContext from '@microsoft/sp-webpart-base/lib/core/IWebPartContext';

import { MockHttpClient } from './MockHttpClient';

  
@Component({
  selector: 'app-root',
  template: `
      <div>
          <h1>Angular App Works!</h1>
          <ul>
              <li *ngFor="let item of items">
                  {{item.Title}}
              </li>
          </ul>
      </div>
  `
})

export class AppComponent implements OnInit {
  public items: ISPList[];
  public context: IWebPartContext;

  constructor() {}

  public ngOnInit() {
    this.context = window["webPartContext"];
    this._renderListAsync();
  }

  private _renderListAsync(): void {
    if (Environment.type === EnvironmentType.Local) {
      // Local environment
      this._getMockListData().then((response) => {
        this.items = response.value;
      });
    } else if (Environment.type == EnvironmentType.SharePoint ||
      Environment.type == EnvironmentType.ClassicSharePoint) {
      // Sharepoint environment
      this._getListData()
        .then((response) => {
          this.items = response.value;
        });
    }
  }

  private _getListData(): Promise < ISPLists > {
    return this.context.spHttpClient.get(
        this.context.pageContext.web.absoluteUrl + `/_api/Web/Lists(guid'16ddf3c3-4cdc-4b4d-b1a3-45269158b4ac')/items`,
        SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      });
  }

  private _getMockListData(): Promise < ISPLists > {
    return MockHttpClient.get()
      .then((data: ISPList[]) => {
        const listData: ISPLists = {
          value: data
        };
        return listData;
      }) as Promise < ISPLists > ;

  }
}

export interface ISPList {
  Title: string;
  Id: string;
}

export interface ISPLists {
  value: ISPList[];
}