import React from 'react';

import { 
  Heading, Text, Spinner, Link,
  IconButton, StarIcon, Pane, TextInput,
  ListItem, UnorderedList,
  EditIcon, LockIcon, PhoneIcon, ApplicationIcon
} from 'evergreen-ui'

import './App.css';

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

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

  async handleSubmit(event) {
    event.preventDefault();
    this.setState({
      loading: true,
      name: null
    });

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

    const form = event.target;
    const form_data = new FormData(form);

    let name = form_data.get('meeting-name');

    let [data_id, data_numbers] = await Promise.all([
      fetch(`${API_URL}conferenceMapper?conference=${name}@conference.meet.jit.si`).then(res => res.json()),
      fetch(`${API_URL}phoneNumberList?conference=${name}@conference.meet.jit.si`).then(res => res.json()),
    ])

    console.log(data_id);
    console.log(data_numbers);

    this.setState({ 
      invalid: false,
      displayErrors: false,
      name: name,
      meetingid: data_id.id,
      phone: data_numbers.numbers.UK,
      loading: false,
    })
  }

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

        <div className="res-block">
          {invalid && (
            <Pane><Text>Form is not valid</Text></Pane>
          )}
          {loading && (
            <Spinner marginX="auto" />
          )}
          {!invalid && name && (
          	<Pane className="center">
              <h3>details for "{name}"</h3>
              <UnorderedList size={500}>
                <ListItem icon={EditIcon}>
                  Notes: <Link href="https://pad.riseup.net/p/{name}">https://pad.riseup.net/p/{name}</Link>
                </ListItem>
                <ListItem icon={ApplicationIcon}>
                  Computer / app: <Link href="https://meet.jit.si/{name}">https://meet.jit.si/{name}</Link>
                </ListItem>
                <ListItem icon={PhoneIcon}>
                  Phone: {phone}
                </ListItem>
                <ListItem icon={LockIcon}>
                  PIN: {meetingid}
                </ListItem>
              </UnorderedList>
          	</Pane>
          )}
        </div>
    	</div>
    );
  }
}

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

  render() {
    return (
      <Pane className="App" >
        <Pane
          className="Main"
        >
          <Form />
          <Pane className="Meta">
            horizonevent by @3wc. <Link href="https://git.autonomic.zone/3wordchant/horizonevent/">source</Link>
          </Pane>
        </Pane>
      </Pane>
    );
  }
}

export default App;