import React from 'react';

import { 
  Heading, IconButton, StarIcon, Pane, TextInput, Text
} from 'evergreen-ui'

import './App.css';

const API_URL = 'https://api.jitsi.net/conferenceMapper';

class Form extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    if (!event.target.checkValidity()) {
    	this.setState({
        invalid: true,
        displayErrors: true,
      });
      return;
    }

    const form = event.target;
    const form_data = new FormData(form);
    fetch(`${API_URL}?conference=${form_data.get('meeting-name')}@conference.meet.jit.si`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then((data) => {
        this.setState({ 
          invalid: false,
          displayErrors: false,
          name: form_data.get('meeting-name'),
          meetingid: data.id
        })
        console.log(this.state.meetingid)
      })
      .catch(console.log);
  }

  render() {
  	const { name, meetingid, invalid, displayErrors } = this.state;
    return (
    	<div>
        <form
          onSubmit={this.handleSubmit}
          noValidate
          className={displayErrors ? 'displayErrors' : ''}
        >
          <Heading size={700}>meeting name:</Heading>
          <TextInput
            height={60}
            margin={20}
            name="meeting-name"
            placeholder="YourMeetingNameHere"
            required
          />
          <IconButton icon={StarIcon} height={60} onClick={this.onClick}/>
        </form>

        <div className="res-block">
          {invalid && (
            <Pane><Text>Form is not valid</Text></Pane>
          )}
          {!invalid && name && (
          	<div>
              <h3>Copy Pasta</h3>
              <p>Notes: https://pad.riseup.net/p/{name}</p>
              <p>Link: https://meet.jit.si/{name}</p>
              <p>PIN: {meetingid}</p>
          	</div>
          )}
        </div>
    	</div>
    );
  }
}

class App extends React.Component {
  onClick = () => {
    console.log("Foo");
  };

  render() {
    return (
      <Pane className="App" >
        <Pane
          className="Main"
        >
          <Form />
        </Pane>
      </Pane>
    );
  }
}

export default App;