import React, { Component } from "react";

import logo from './logo.svg';
import './App.css';

import * as microsoftTeams from "@microsoft/teams-js";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: ""
    };
  }

  handleUrlChange = (e) => {
    console.log(e.target.value); 
    this.setState({ url: e.target.value }); 

  }

  handleButtonClick = () => {

    let contentUrl = this.state.url; 
    let websiteUrl = this.state.url;

    console.log(this.state.url); 

    microsoftTeams.settings.setSettings({
      suggestedDisplayName: "SM Test 2 Tab",
      entityId: "Test",
      contentUrl: contentUrl,
      websiteUrl: websiteUrl,
    });

      microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
        // const baseUrl = `https://${window.location.hostname}:${window.location.port}`;

        saveEvent.notifySuccess();
      });


    microsoftTeams.settings.setValidityState(true);
  }

  render() {

    microsoftTeams.initialize();

    return(
      <div className="main-content"> 
        <div>
          <p>Please enter the URL of the app to be opened and click OK.</p>
          <div class="url-container">
            <input className="url-input" onChange={this.handleUrlChange}></input>
            <button onClick={this.handleButtonClick}>OK</button>
          </div>
        </div>
      </div>
    )
  }
}

export default App;