#app

* {
  box-sizing: border-box;
  font-weight: 200;
  font-family: 'Dosis', sans-serif;
}

html {
  height: 100%;
  font-size: 10px;
}

body {
  min-height: 100%;
  font-size: 1.6rem;
  background: tomato; // fallback for older browsers
  background: -webkit-linear-gradient(135deg, #ffbebe, #ffc9a6); 
  background: -o-linear-gradient(135deg, #ffbebe, #ffc9a6); 
  background: -moz-linear-gradient(135deg, #ffbebe, #ffc9a6);  
  background-image: linear-gradient(135deg, #ffbebe, #ffc9a6); 
}

.app {
  color: #ff9691;
  
  .vault {
    
    .vault-card {
      min-height: 400px;
      max-width: 800px;
      width: 96%;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 40px;
      background: #ffdac5;
      position: relative;
      box-shadow: 0px 8px 16px rgba(254, 158, 121, 0.2), 4px 8px 12px rgba(254, 158, 121, 0.2);
      padding-left: 90px;
      
      top: 10px;
      
      @media(min-width: 1000px){
        top: 126x;
      }
      
      .main-card-view {
        height: 100%;
        
        &:before,
        &:after {
          display: table;
          content: " ";
        }
        
        &:after {
          clear: both;
        }
        
        .gold {
          background: #ffdac5;
        }
        
        .bitcoin {
          background: #ffe6db;
        }
        
        .gold,
        .bitcoin {
          width: 50%;
          float: left;
          height: 100%;
          text-align: center;
          
          @media(max-width: 1000px){
            width: 100%;
          }
          
          h1 {
            color: #fff;
            font-size: 5rem;
            margin-bottom: 0;
          }
          
          .amount {
            font-size: 13rem;
            margin: 2px 0 0 0;
          }
          
          .units {
            margin: -24px 0 0 0;
            font-size: 3rem;
          }
          
          .buttons {
            margin-top: 25px;
            margin-bottom: 36px;
            
            button {
              border-radius: 36px;
              font-size: 2rem;
              padding: 3px 0;
              width: 100px;
              font-weight: 600;
              text-transform: uppercase;
              
              @media(max-width: 400px){
                width: 86px;
              }
              
              &.buy {
                color: #fff;
                background: #ff9691;
                border: 3px solid #ff9691;
              }

              &.sell {
                color: #ff9793;
                background: transparent;
                border: 3px solid #ff9793;
                margin-left: 20px;
                
                @media(max-width: 400px){
                  margin-left: 7px;
                }
              }
            }
          }
        }
      }
      
      .left-bar {
        width: 90px;
        position: absolute;
        background: #fffefc;
        top: 0;
        left: 0;
        bottom: 0;
        
        .avatar {
          width: 90px;
          height: 90px;
          cursor: pointer;
          
          i {
            font-size: 90px;
            background: #ffd2b3;
            color: #fff;
          }
        }
        
        .middle-icons {
          position: relative;
          
          i {
            position: absolute;
            right: 0;
            left: 0;
            width: 40px;
            font-size: 40px;
            display: inline-block;
            margin: auto;
            cursor: pointer;
            
            &:nth-of-type(1){
              top: 22px;
              
              @media(max-width: 1000px){
                top: 60px;
              }
            }
            
            &:nth-of-type(2){
              top: 92px;
              
              @media(max-width: 1000px){
                top: 171px;
              }
            }
            
            &:nth-of-type(3){
              top: 166px;
              
              @media(max-width: 1000px){
                top: 286px;
              }
            }
          }
        }
        
        .exit {
          background: #fff8f4;
          width: 90px;
          height: 80px;
          position: absolute;
          bottom: 0;
          left: 0;
          
          i {
            transform: rotate(-180deg);
            position: absolute;
            right: 0;
            left: 0;
            bottom: 20px;
            width: 40px;
            font-size: 40px;
            display: inline-block;
            margin: auto;
            cursor: pointer;
          }
        }
      }
    }
  }
}

class App extends React.Component { 
  constructor(){
    super();
    
    let goldValue = parseInt(localStorage.getItem('goldValue'));
    let bitcoinValue = parseInt(localStorage.getItem('bitcoinValue'));
    
    goldValue = typeof goldValue === 'number' && !isNaN(goldValue) ? goldValue : 30;
    bitcoinValue = typeof bitcoinValue === 'number' && !isNaN(bitcoinValue) ? bitcoinValue : 46.8;
    
    this.state = {
      vault: {
        wallets: [
          {
            id: 0,
            name: 'Gold',
            className: 'gold',
            value: goldValue,
            units: 'bars',
            increment: 'whole'
          },
          {
            id: 1,
            name: 'Bitcoin',
            className: 'bitcoin',
            value: bitcoinValue,
            units: 'bitcoin',
            increment: 'one_decimal_place'
          }
        ]
      }
    }
  };
  
  componentDidMount() {
    // this.setUserData();
  };
  
  render () {
    let { title, vault } = this.state;
    
    return (
      <div className="app">
        <Vault 
          title={title}
          vault={vault}
          updateAmount={this.updateAmount}
        />
      </div>
    )
  };
  
  updateAmount = (wallet, action) => {
    let vault = {};
    
    vault.wallets = this.state.vault.wallets.map(function(w){
      var increment;
      
      if (w.id === wallet.id) {
        switch (wallet.increment) {
          case 'whole':
            increment = 1;
            break;
          case 'one_decimal_place':
            increment = .1;
            break;
        }
        
        switch (action) {
          case 'BUY':
            wallet.value += increment;
            wallet.value = Math.round( wallet.value * 10 ) / 10;
            break;
          case 'SELL':
            wallet.value -= increment;
            wallet.value = Math.round( wallet.value * 10 ) / 10;
            break;
        }
        
        if (wallet.value > 100) {
          wallet.value = 100;
        } else if(wallet.value <= 0) {
          wallet.value = 0;
        }
        
        localStorage.setItem(wallet.className + 'Value', wallet.value);
      }
      return wallet;
    });
    
    let newState = Object.assign({}, this.state, vault.wallets);
    
    this.setState({
      newState: newState
    });
  };
}

class Vault extends React.Component { 
  constructor(props){
    super(props);
  };
  
  componentDidMount() {
    // this.setUserData();
  };
  
  render () {    
    let { title, vault, updateAmount } = this.props;
    let wallets = vault.wallets;
    
    return (
      <div className="vault">        
        <div className="vault-card">
          <VaultLeftBar/>
          
          <div className="main-card-view">
            
            {wallets.map((wallet, i) =>
                <VaultWallet   
                  wallet={wallet} 
                  key={i} 
                  updateAmount={updateAmount}
                />
            )}
            
          </div>
        </div>
      </div>
    )
  };
}

class VaultWallet extends React.Component { 
  constructor(props){
    super(props);
  };
  
  componentDidMount() {
    // this.setUserData();
  };
  
  render () {   
    let { wallet, updateAmount } = this.props;
    
    return (      
      <div className={wallet.className}>
        <h1>{wallet.name}</h1>
        <p className="amount">{wallet.value}</p>
        <p className="units">{wallet.units}</p>
        <div className="buttons">
          <button className="buy" onClick={() => {updateAmount(wallet, 'BUY')}}>Buy</button>
          <button className="sell" onClick={() => {updateAmount(wallet, 'SELL')}}>Sell</button>
        </div>
      </div>
    )
  };
}

class VaultLeftBar extends React.Component { 
  constructor(props){
    super(props);
  };
  
  componentDidMount() {
    // this.setUserData();
  };
  
  render () {        
    return (      
      <div className="left-bar">
        <div className="avatar">
          <i className="material-icons">account_box</i>
        </div>
        <div className="middle-icons">
          <i className="material-icons">credit_card</i>
          <i className="material-icons">enhanced_encryption</i>
          <i className="material-icons">insert_chart</i>
        </div>
        <div className="exit">
          <i className="material-icons">exit_to_app</i>
        </div>
      </div>
    )
  };
}

ReactDOM.render(
	<App />,
	document.getElementById('app')
);