import React, { Component } from 'react';
import gear from './settings.svg';
import copy from './copy-ico.png';
import hide from './hide-ico.png';
import login from './login-go.png'
// import copy-a from './copy-active.png';
// import view from './view-ico.png';
// import gear-a from './setting-active.png';
import './App.css';

class App extends Component {
  constructor(){
    super();

    this.state={
      showOptions: false,
    }

    this.items = [
      {name:"Edit",
        clickHandler : function (){
          alert("You clicked me!! Edit")
        }},
      {name:"Go to this Site",
        clickHandler : function (){
          alert("You clicked me!! Go to this Site")
        }},
      {name:"Delete",
        clickHandler : function (){
          alert("You clicked me!! Delete")
        }}
    ];
}
  onClick(e){
    e.preventDefault();
    this.setState({showOptions: !this.state.showOptions})
  }

  createItems(items){

          let output = this.items.map((anItem, index) => <div className="Items" key={index} onClick={anItem.clickHandler}>{anItem.name}</div>);
          return output;
  }

  render() {
    return (
      <div className="App">

        <div className="tile-container">
            <div className="upper-container">
              <div className="title-box"></div>
              <div className="title-options">
                <div className="usr-pw">..........</div>
                <img src={hide} className="hide-img" alt="hide"></img>
                <img src={copy} className="copy-img" alt="copy"></img>
                <img src={login} className="login-img" alt="login"></img>
              </div>
              <div className="circle">Ar</div>
          </div>
          <div className="title-text">arandomnlyverylongstringgoeshere.com</div>
          <div className="email-box">
            <div className="email-text">janedoe@arandomnlyverylongstringgoeshere.com</div>
            <img src={gear} className="settings-img" alt="gear" onClick={this.onClick.bind(this)}/>
              {
                this.state.showOptions && <div className="options">
                                              <div className="values">
                                                {this.createItems(this.items)}
                                              </div>
                                            </div>
            }
          </div>
        </div>
    </div>


    );
  }
}

export default App;