import React from 'react';
import '../../css/Views/ticket.css';
import Header from '../Components/Header';
import Navbar from '../Components/Navbar';
import 'react-perfect-scrollbar/dist/css/styles.css';
import Footer from '../Components/Footer';
import SearchBar from '../Components/SearchBar';
import BarcodeReader from 'react-barcode-reader';
import axios from 'axios';
import ArticleDetails from '../Components/ArticleDetails';
import { Link } from 'react-router-dom';
import NotInBdd from '../Components/NotInBdd';

export default class Stock extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      articles: [],
      scannedCode: '',
      articlesJamalette:[],
      empty:true,
      totalPrice:0,
      totalQuantity:0,
      redirect:false,
      onNotInBdd:false
    }

    this.handleScan = this.handleScan.bind(this);
  }

  
  getArticles = () => {
    axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
        .then(res => {
            this.setState({articles : res.data}, () => {
                console.log(this.state.articles)
            })
        })
        .catch(error => {
            console.log(error.response)
        })
  }

  componentDidMount() {
    this.getArticles();
  }
  
  // RECHERCHE DE L'ARTICLE
  getArticleByCode(code) {
    let i=0;
    let current = this.state.articles[i];
    let trouve = current.code === code ? true : false;
    while(!trouve && i < this.state.articles.length-1) {
      i++;
      current = this.state.articles[i];
      if (current.code === code) {
        trouve = !trouve;
      }
    }
    
    // Gestion d'erreur si le code n'est pas dans la BDD
    if (!trouve){
      this.setState({onNotInBdd:true})
    } else {

    console.log(current);

    if (this.state.articlesJamalette.length !== 0){
      console.log("test already");
      let j = 0;
      let aux = this.state.articlesJamalette[j];
      let already = aux.id === current.id ? true : false;
      console.log(already);
      while(!already && j < this.state.articlesJamalette.length-1){
        console.log("in while");
        j++;
        aux = this.state.articlesJamalette[j];
        if (aux.id === current.id) {
          already = !already;
        }
      }
      
      if (already){
        this.state.articlesJamalette[j].quantity++;
      } else {
        current.realQuantity = current.quantity;
        current.quantity = 1;
        this.state.articlesJamalette.push(current);
      }

    } else {
      current.realQuantity = current.quantity;
      current.quantity = 1;
      this.state.articlesJamalette.push(current);
    }

    console.log(this.state.articlesJamalette);
    

    this.setState({empty:false},()=>{
      this.calculateTotaux()
    })
    
    }
  }

  calculateTotaux = () => {
    let sumPrice = 0;
    let sumQuantity = 0;
    for (let i = 0 ; i<this.state.articlesJamalette.length;i++){
      sumPrice += this.state.articlesJamalette[i].price*this.state.articlesJamalette[i].quantity;
      sumQuantity += this.state.articlesJamalette[i].quantity;
    }
    this.setState({totalPrice:sumPrice.toFixed(2),totalQuantity:sumQuantity},()=>{
      console.log(this.state.totalPrice);
    })

  }

  handleScan(code) {
      this.getArticleByCode(code)
  }

  handleValidation = () => {

    for (let i = 0 ; i < this.state.articlesJamalette.length ; i++) {

            axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.articlesJamalette[i].id}`,
            {
                'name':this.state.articlesJamalette[i].name,
                'description':this.state.articlesJamalette[i].description,
                'quantity':this.state.articlesJamalette[i].realQuantity-this.state.articlesJamalette[i].quantity,
                'price':this.state.articlesJamalette[i].price,
                'code':this.state.articlesJamalette[i].code,
                'category_id':this.state.articlesJamalette[i].category.id
            }
            )
            .then(res => {
                console.log(res.data)
                this.setState({articlesJamalette:[],empty:true})
            })
            .catch(error => {
                console.log(error.response)
            })
        
        }
      }

  closeNotInBdd = () => {

    this.setState({onNotInBdd:false})

  }

  render() {
    if (!sessionStorage.getItem('token')){
      return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
    } else {
    return (
        <div id="stock">
            <Header title='Le Ticket de Caisse'/>
            <Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
            <BarcodeReader onScan={this.handleScan}/>
            <SearchBar/>
            {this.state.onNotInBdd && 
            <NotInBdd handleCloseAbove={this.closeNotInBdd}/>
            }
            {!this.state.empty ?
                <div id="articlesInline">
                  {this.state.articlesJamalette.map((article) =>
                  <ArticleDetails squaredBubble={false} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
                  )}
                  <div id="total">
                    <div id="totalTxt">
                      Total
                    </div>
                    <div id="totalPrice">
                      {this.state.totalPrice} €
                    </div>
                    <div id="totalQuantity">
                      <div id="totalQuantityBox">
                        {this.state.totalQuantity}  
                      </div>
                    </div>
                  </div>
                  <div id="validateArticlesBlock">
                    <div id="validateArticlesBox" onClick={this.handleValidation}>
                      Valider
                    </div>
                  </div>
                </div>
            :<div id="emptyTicketBox">
              <p id="emptyTicket">
                Scanne tes articles pour remplir le ticket de caisse ! 
              </p>
            </div> }
            <Footer/>
        </div>
    )}
  }
}