import React, { Component } from 'react'
import Form from 'react-bootstrap/Form'
import { Container } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import Gun from 'gun/gun'
import SEA from 'gun/sea'

const formattadas = tadas => Object.keys(tadas)
  .map(key => ({ key, val: tadas[key] }))
  .filter(t => Boolean(t.val) && t.key !== '_')

export default class Auth extends Component {
  constructor({ gun }) {
    super()
    this.gun = gun
    this.user = gun.user()
    this.state = {
      ipfsPub: '96969',
      ipfsPriv: '123',
      said: '',
      newTada: '',
      tadas: []
    }
  }

  componentDidMount() {
    this.user.auth(this.state.ipfsPub, this.state.ipfsPriv, (ack) => { if (ack.err) console.log('FUCK! ' + ack.err) });
    this.gun.on('auth', () => this.thing());
  }

  thing() {
    console.log('on auth triggered');
    this.gun.get(tadas => this.setState({ tadas: formattadas(tadas) }));
  }

/*   handleAuth() {
    this.user.auth(this.state.ipfsPub, this.state.ipfsPriv, (ack) => { if (ack.err) console.log(ack.err) });
    let statement = this.user.get('said');
    this.setState({ said: statement });
  }

  handlePub(event) {
    var value = event.target.value
    this.setState({ ipfsPub: value })
  }

  handlePriv(event) {
    var value = event.target.value
    this.setState({ ipfsPriv: value })
  } */

  handleChange = e => this.setState({ newTada: e.target.value })

  add = e => {
    e.preventDefault()
    this.gun.get('tadas').set(this.state.newTada)
    this.setState({ newTada: '' })
    console.log("Add attempted")
  }

  del = key => this.gun.path(key).put(null)

  render() {
    return <>
      <p />
      <Container>
        <div>Gun</div>
        <div>
          <form onSubmit={this.add}>
            <input value={this.state.newTada} onChange={this.handleChange} />
            <button>Add</button>
          </form>
          <br />
          <ul>
            {this.state.tadas.map(tada => <li key={tada.key} onClick={_ => this.del(tada.key)}>{tada.val}</li>)}
          </ul>
        </div>
      </Container></>
  }
}