import React, { Component } from "react";
import { HashRouter as Router, Route, NavLink } from 'react-router-dom';
import './index.css'

function start(txt){
	var str1 = "First"
	if(str1==txt) {
		return null
	}
	else {
		return 
		
	}
}

class Shop extends React.Component {
	
	constructor() {
		super();
		this.state ={txt: 'First', list: []};
		
		
	}
	
	
	onButtonClick(which) {
		this.load(which);
		this.setState({ txt: 'Clicked!' });
	}
	
	load(which){
		if(which=='0')
		{
			return fetch('/tea/0')
			.then((response) => response.json())
			.then (( responseJson) => {
				console.log( responseJson)
				this.setState({
					list: responseJson.data
				});
			})
		} else if ( which=='1')
		{
			return fetch('/tea/1')
			.then((response) => response.json())
			.then (( responseJson) => {
				console.log( responseJson)
				this.setState({
					list: responseJson.data
				});
			})
		} 
		else if ( which=='2')
		{
			return fetch('/tea/2')
			.then((response) => response.json())
			.then (( responseJson) => {
				console.log( responseJson)
				this.setState({
					list: responseJson.data
				});
			})
		} 
		else
		{
			return fetch('/tea/3')
			.then((response) => response.json())
			.then (( responseJson) => {
				console.log( responseJson)
				this.setState({
					list: responseJson.data
				});
			})
		} 
	}
	


  render() {
	
	var test = "First"
    return (
      <div>
				
		{this.state.txt==test &&
		<div class="row">
		<div class="col-lg-6">
		<div class="bg-faded p-4 my-4">
        <div class="card card-inverse">
          <img class="card-img img-fluid w-100" src="img/black-tea.jpg" alt=""></img>
          <div class="card-img-overlay bg-overlay">
            <h2 class="card-title text-shadow text-white text-uppercase mb-0">Black Tea</h2>
            <h4 class="text-shadow text-white"></h4>
            <button onClick={() => this.onButtonClick(0)}	 class="btn btn-secondary">Taste it</button>
          </div>
        </div>		
		</div>
		</div>
		
		<div class="col-lg-6">
		<div class="bg-faded p-4 my-4">
        <div class="card card-inverse">
          <img class="card-img img-fluid w-100" src="img/green-tea.jpg" alt=""></img>
          <div class="card-img-overlay bg-overlay">
            <h2 class="card-title text-shadow text-white text-uppercase mb-0">Green Tea</h2>
            <h4 class="text-shadow text-white"></h4>
            <button onClick={() => this.onButtonClick(1)}	 class="btn btn-secondary">Taste it</button>
          </div>
        </div>		
		</div>
		</div>
		</div>
		}
		
		{this.state.txt==test &&
		<div class="row">
		<div class="col-lg-6">
		<div class="bg-faded p-4 my-4">
        <div class="card card-inverse">
          <img class="card-img img-fluid w-100" src="img/herbal-tea.jpg" alt=""></img>
          <div class="card-img-overlay bg-overlay">
            <h2 class="card-title text-shadow text-white text-uppercase mb-0">Herbal Tea</h2>
            <h4 class="text-shadow text-white"></h4>
            <button onClick={() => this.onButtonClick(2)} class="btn btn-secondary">Taste it</button>
          </div>
        </div>		
		</div>
		</div>
		
		<div class="col-lg-6">
		<div class="bg-faded p-4 my-4">
        <div class="card card-inverse">
          <img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
          <div class="card-img-overlay bg-overlay">
            <h2 class="card-title text-shadow text-white text-uppercase mb-0">Fruit Tea</h2>
            <h4 class="text-shadow text-white"></h4>
            <button onClick={() => this.onButtonClick(3)} class="btn btn-secondary">Taste it</button>
          </div>
        </div>		
		</div>
		</div>
		</div>
		}
		
		{this.state.txt!=test &&
		<div>      
         
       
			
			{this.state.list.map(function(name){
				return 	<div class="col-lg-12">
						<div class="col-lg-4">
						<div class="bg-faded p-4 my-4">
							<div class="card card-inverse">
							<img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
							<div class="card-img-overlay bg-overlay">
							
							</div>
							</div>
						</div>
						</div>
						<div class="col-lg-8">
							<h1 className="Name">{name.name}</h1>
							<h3>{name.description}</h3>
						</div>
						
						
						</div>
	
			})}
			
					

		</div>
		}
		
		    
      </div>
    );
  }
}
 
export default Shop