import React from 'react';
import '../../css/Views/stock.css';
import Header from '../Components/Header';
import Articles from '../Components/Articles';
import ArticlesByCategory from '../Components/ArticlesByCategory';
import Navbar from '../Components/Navbar';
import CreateArticle from '../Components/CreateArticle';
import 'react-perfect-scrollbar/dist/css/styles.css';
import EditArticle from '../Components/EditArticle';
import CreateCategory from '../Components/CreateCategory';
import Footer from '../Components/Footer';
import SearchBar from '../Components/SearchBar';
import axios from 'axios';
import AppLoader from '../Components/AppLoader';
import Categories from '../Components/Categories';
import EditCategory from '../Components/EditCategory';
import Sort from '../Components/Sort';
import { Link } from 'react-router-dom';
import Selected from '../Components/Selected';

export default class Stock extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      onNewArticle:false,
      onEditArticle:false,
      onNewCategory:false,
      onCategories:false,
      onEditCategory:false,
      article:{},
      imageFile:{},
      articles:[],
      categoryToModify:'',
      categorySorted:false,
      onSortedCategories:false,
      onSearch:false,
      lowToHigh: true,
      selectedArticles:[],
      counter:0,
      code:'',
      dividedArticles:[]
    }
  }

  componentDidMount() {
    this.getArticles()
  }




  deleteSelectedArticles = () => {
    for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {

            axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`)
            .then(res => {
                    console.log(res.data)
                    if (i === this.state.selectedArticles.length-1){
                      this.setState({counter:0,selectedArticles:[]},()=>{
                        this.getArticles()
                      })
                    }
            })
            .catch(error => {
                console.log(error.response)
            })
          }
}

      // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner 
    // on va minus ou plus quantity et colorer en rouge

    selectArticles = (e,id) => {
      let currentElement = e.target;
      let iconElement = e.target;
      if (e.target.tagName === "path"){
          currentElement = e.target.parentElement
          iconElement = currentElement
      }
      if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
          iconElement = currentElement
      }
      while (currentElement.id !== "bulle"){
          currentElement = currentElement.parentElement
      }
      
      if ((e.target.id !==  "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross")  && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
        let index = this.getArticleById(id).i;
        let articles = this.state.articles;
        articles[index].selected = !this.state.articles[index].selected;
        console.log(articles[index].selected);
        this.setState({articles:articles},()=>{
            if (this.state.articles[index].selected){
              this.select(id)
              if (this.state.articles[index].quantity === 0){
                this.colorArticle("red&white",currentElement)
              } else {
                this.colorArticle("white",currentElement)
              }
            } else {
              this.deselect(id)
              if (this.state.articles[index].quantity === 0){
                this.colorArticle("red",currentElement)
              } else {
                this.colorArticle("grey",currentElement)
              }
            }
        })   
        } else if (iconElement.id === "minusIcon"){
            this.minusQuantity(currentElement,id)
        } else if (iconElement.id === "plusIcon"){
            this.plusQuantity(currentElement,id)
        }
  } 

  colorArticle = (color,element) => {
      
    switch (color) {
        case "white":
            element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
            break;
        case "grey" :
            element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
            break;
        case "red" :
            element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
            break;
        case "red&white" :
            element.style.cssText = "background-color:rgba(255, 139, 139, 0.60);"
            break;
        default :
            break;
    }
}

  plusQuantity = (element,id) => {
    let index = this.getArticleById(id).i;
    let articles = this.state.articles;
    articles[index].quantity++;
    console.log(articles[index]);
    this.setState({articles:articles},()=>{
      this.updateArticle(index,id);
        if (this.state.articles[index].quantity > 0 ){
            if (this.state.articles[index].selected){
                this.colorArticle("white",element)
            } else {
                this.colorArticle("grey",element)
            }
        }
    })
}

minusQuantity = (element,id) => {
  let index = this.getArticleById(id).i;

  if (this.state.articles[index].quantity > 0){
    let articles = this.state.articles;
    articles[index].quantity--;
    console.log(articles[index]);
    this.setState({articles:articles},()=>{
      this.updateArticle(index,id);
        if (this.state.articles[index].quantity === 0 ){
            if (this.state.articles[index].selected){
                this.colorArticle("red&white",element)
            } else {
                this.colorArticle("red",element)
            }
        }
    })
  }
}

getBulleById = (id) => {
  let element;
  let articles = document.getElementById("articles")
  for (let i = 0; i < articles.childElementCount ; i++){
    if (id == articles.children[i].title){
      element = articles.children[i]
    }
  }

  return element
}


updateSelectedArticles = (value) => {


  let articles = this.state.selectedArticles;

  for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
    
      
      if ((value !== -1) || articles[i].quantity !== 0){
        articles[i].quantity+=value;
      
        
      this.setState({selectedArticles:articles},() => {
        axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`,
        {
            'name':this.state.selectedArticles[i].name,
            'description':this.state.selectedArticles[i].description,
            'quantity':this.state.selectedArticles[i].quantity,
            'price':this.state.selectedArticles[i].price,
            'code':this.state.selectedArticles[i].code,
            'category_id':this.state.selectedArticles[i].category.id
        }
        )
        
        .then(res => {
            let element = this.getBulleById(this.state.selectedArticles[i].id)
            if (this.state.selectedArticles[i].quantity > 0){
              this.colorArticle("white",element)
            } else {
              this.colorArticle("red&white",element)
            }
            
        })
        .catch(error => {
            console.log(error.response)
        })
  

      })
    }
      
  }
  

}

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

  select = (id) => {
    console.log(id)
    this.setState({counter:this.state.counter+1},()=>{
      console.log(this.state.counter)
      this.state.selectedArticles.push(this.getArticleById(id).current)
      console.log(this.state.selectedArticles)
    })
  }

    // RECHERCHE DE L'ARTICLE
    getArticleById(id) {
      let i=0;
      let current = this.state.articles[i];
      let trouve = current.id === id ? true : false;
      while(!trouve) {
        i++;
        current = this.state.articles[i];
        if (current.id === id) {
          trouve = !trouve;
        }
      }
      return({current,i});
    }

  deselect = (id) => {

    this.setState({counter:this.state.counter-1},()=>{
      console.log(this.state.counter)
      this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id).current)},()=>{
        console.log(this.state.selectedArticles)
      })
      
    })

  }

  // Implémenter la fonction sortArticles :
  sortArticles = (sortType) => {
      
    let sorted;
    //TRI PAR ORDRE ALPHABETIQUE OU PRIX
    if (sortType === "name"){
      this.setState({orderIsHidden: false}) //choix d'ordre possible
      if (this.state.lowToHigh) {
        //ordre alphabétique croissant
        sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
      } else {
        //ordre alphabétique décroissant
        sorted = [...this.state.articles].sort((a, b) => b.name.localeCompare(a.name))
      }
    } else if (sortType === "price") {
      console.log('tri pix')
      this.setState({orderIsHidden: false}) //choix d'ordre possible
      if (this.state.lowToHigh) {
        //ordre croissant
        sorted = [...this.state.articles].sort((a, b) => a.price - b.price)
      } else {
        //ordre décroissant
        sorted = [...this.state.articles].sort((a, b) => b.price - a.price)
      }
    } else {
      console.log('autre 1')
      this.setState({orderIsHidden: true})
      this.setState({lowToHigh: false})
      sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
    }

    //TRI PAR CATEGORIE
    if (sortType === 'category_id'){
      this.setState({articles:sorted},() => {
        this.splitArticlesCategories()
        this.setState({onSortedCategories:true})
      })
    }else{
      console.log('autre 2')
      this.setState({articles:sorted},() => {
        console.log(this.state.articles)
        this.setState({onSortedCategories:false})
      })
    }
  }

  getArticles = () => {
    axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
        .then(res => {
            for (let i = 0; i<res.data.length;i++){
              res.data[i].selected = false;
            }
            this.setState({articles : res.data}, () => {
                console.log(this.state.articles)
                this.setState({sortType: "name"})
            })
        })
        .catch(error => {
            console.log(error.response)
        })
  }

  handleNewArticle = () => {
        this.setState({onNewArticle:true},()=>{
          console.log(this.state.onNewArticle)
        })
  }

  handleCloseNewArticle = () => {
    this.setState({onNewArticle:false})
  }

  handleArticleEdition = (article) => {
    this.setState({article:article})
    this.setState({onEditArticle:true});
  }

  handleCloseEditArticle = () => {
    this.setState({onEditArticle:false})
  }

  handleNewCategory = () => {
    this.setState({onNewCategory:true})
  }

  handleCloseNewCategory = () => {
    this.setState({onNewCategory:false})
  }

  handleCategories = category => {
    this.setState({currentCategory:category})
    this.setState({onCategories:true})
  }

  handleCloseCategories = () => {
    this.setState({onCategories:false})
  }

  handleEditCategory = category => {
    this.handleCloseCategories()
    this.setState({categoryToModify:category})
    this.setState({onEditCategory:true})
  }

  handleCloseEditCategory = () => {
    this.setState({onEditCategory:false})
  }



  //ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js)
  handleChangeSortType = (type) => {
    this.setState({sortType: type}, () => {
      this.sortArticles(this.state.sortType)
    })
  }

  //Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
  handleChangeSortOrder = () => {
    this.setState({lowToHigh: !this.state.lowToHigh},() => {
      this.sortArticles(this.state.sortType);
    });
  }

  searchArticles = () => {
    this.setState({onSearch:true})
    let bodyFormData = new FormData()
    bodyFormData.set('search',this.state.search)
    axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/articles',bodyFormData)
            .then(res => {
                this.setState({articles : res.data}, () => {
                  if (this.state.sortType === "category_id"){
                    this.splitArticlesCategories()
                  }
                })
            })
            .catch(error => {
                console.log(error.response)
            })
  }

  splitArticlesCategories = () => {
    let counterTab = 0;
    let divided = [];
    divided.push([this.state.articles[0]])
    for (let i = 1; i<this.state.articles.length;i++){
      if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
        divided[counterTab].push(this.state.articles[i])
      } else {
       counterTab++
       divided.push([this.state.articles[i]])
      }
    }
    this.setState({dividedArticles:divided},()=>{
      this.getElementandColorSplit()
    })
    
  }

  getElementandColorSplit = () => {
    let articles = document.getElementById("articles")
        for (let i = 0; i<articles.childElementCount;i++){
          for (let j = 0; j<articles.children[i].children[2].childElementCount; j++){
            if (this.state.dividedArticles[i][j].quantity === 0){
              this.colorArticle("red",articles.children[i].children[2].children[j])
            }
          }
        }
  }

  handleSearchChange = event => {
    this.setState({search : event.target.value},()=>
    {
      this.searchArticles();
    })
  }

  handleSubmit = event => {
    event.preventDefault()
    this.searchArticles();
  }

  closeWithEscape = (e) => {
    if (e.keyCode === 27){
      if (this.state.onEditArticle){
        this.handleCloseEditArticle()
      } else if(this.state.onNewArticle){
        this.handleCloseNewArticle()
      } else if(this.state.onNewCategory){
        this.handleCloseNewCategory()
      } else if(this.state.onEditCategory){
        this.handleCloseEditCategory()
      } else if(this.state.onCategories){
        this.handleCloseCategories()
      }
    }
  }


  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" tabIndex={-1} onKeyDown={this.closeWithEscape}>
              <Header title='Le Stock'/>
              <Navbar handleNewArticle={this.handleNewArticle} handleNewCategory={this.handleNewCategory} right="Le Ticket de Caisse" left="Créer" leftLeft="Article" leftMiddle="|" leftRight="Catégorie" redirect="/ticket"/>
              {this.state.onNewArticle ?
                <CreateArticle keepNewArticle={this.handleNewArticle} handleCloseAbove={this.handleCloseNewArticle}/>
              : null}
              <SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/>
              <div id="sortBlock">
                <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsHidden={this.state.orderIsHidden} lowToHigh={this.state.lowToHigh}/>
              </div>
              <div id="selectedBlock">
                <Selected delete={this.deleteSelectedArticles} updateArticles={this.updateSelectedArticles} counter={this.state.counter}/>
              </div>
              <div id="articleBlock">
              {this.state.articles && this.state.articles[0] ? 
                this.state.onSortedCategories ?
                  <ArticlesByCategory selectArticles={this.selectArticles} colorArticle={this.colorArticle} handleCategories={this.handleCategories} articles={this.state.dividedArticles} editionArticle={this.handleArticleEdition}/>
                : <Articles selectArticles={this.selectArticles} colorArticle={this.colorArticle} plus={this.plusQuantity} minus={this.minusQuantity} deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
              : <AppLoader/>
              }
              </div>
              {this.state.onEditArticle ?
                <EditArticle handleCloseAbove={this.handleCloseEditArticle} article={this.state.article}/>
              : null}
              {this.state.onNewCategory ?
                <CreateCategory reload={true} handleCloseAbove={this.handleCloseNewCategory}/>
              : null }
              {this.state.onCategories ?
                <Categories handleEditCategory={this.handleEditCategory} currentCategory={this.state.currentCategory} handleCloseAbove={this.handleCloseCategories}/>
              : null}
              {this.state.onEditCategory ?
                <EditCategory category={this.state.categoryToModify} handleCloseAbove={this.handleCloseEditCategory}/>
              : null}
              <Footer/>
          </div>
      )}
    }
  }