import React from 'react';
import './App.css';
import { Value, Image, List } from '@solid/react';
import Email from './Email';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

  state = {
    profile: '',
    renderProfile: false
  };

  viewProfile(profile) {
    this.setState({ profile: profile, renderProfile: true });
  }

  render() {
    const { profile, renderProfile } = this.state;
    return (
      <div className="bg-dark text-white" style={{width:100  + '%',height:1500  + 'px'}}>
      <nav className="navbar navbar-dark bg-secondary">
        <span className="navbar-brand mb-0 h1">Profile viewer</span>
      </nav>
      <center>
      <div style={{marginLeft:50 + "px"}}>
        <h3>Input solid profile:</h3>
        <p>
          <label htmlFor="profile"></label>
          <input id="profile" value={profile} onChange={e => this.setState({ profile: e.target.value })} />
          <button onClick={() => this.viewProfile(profile)}>View</button>
        </p>
        {renderProfile &&
         <div>
            <p>
              <Image className="profile-img" src={`[${profile}][foaf:img]`} />
              <br />
              <label htmlFor="name">Name: &nbsp;</label>
              <span id="name">
                <Value src={`[${profile}][foaf:name]`} />
              </span>
              <br />
              <label htmlFor="email">Email: &nbsp;</label>
              <span id="email">
                <Email src={`[${profile}][foaf:mbox]`} />
              </span>
              <br />
              <label htmlFor="role">Role: &nbsp;</label>
              <span id="role">
                <Value src={`[${profile}][foaf:role]`} />
              </span>
              <br />
              <label htmlFor="organization">Organization name: &nbsp;</label>
              <span id="organization">
                <Value src={`[${profile}][foaf:organization]`} />
              </span>
              <br />

            </p>
            <div align="left">
            <label htmlFor="friends">Friends: </label>
            <List class="list-group " src={`[${profile}][foaf:knows]`}>{friend =>
              <li style={{width:80  + '%'}} class="list-group-item bg-dark text-white" key={friend}>
                <Image className="profile-img" src={`[${friend}][foaf:img]`} />
                <br />
                <label>Name: &nbsp;</label>
                <button style={{color:'white'}} onClick={() => this.viewProfile(friend)}>
                  <Value src={`[${friend}].name`}>{`${friend}`}</Value>
                </button>
                <br />
                <label>Email: &nbsp;</label>
                <Email style={{color:'white'}} src={`[${friend}][foaf:mbox]`} />
                <br />
                <label>Role: &nbsp;</label>
                <Value style={{color:'white'}} src={`[${friend}][foaf:role]`} />
                <br />
                <label>Organization name: &nbsp;</label>
                <Value style={{color:'white'}} src={`[${friend}][foaf:organization]`} />
              </li>}
            </List>
            </div>
          </div>
        }
      </div>
      </center>
      </div>
    );
  }
}

export default App;