import React from 'react'
import { Icon} from '@iconify/react';
import minusIcon from '@iconify/icons-fa-solid/minus';
import plusIcon from '@iconify/icons-fa-solid/plus';
import editSolid from '@iconify/icons-clarity/edit-solid';
import '../../css/Components/articledetails.css'
import axios from 'axios'
import { Redirect } from 'react-router';

class ArticleDetails extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            currentArticle:'',
            redirect:false,
            redcrossPressed:false,
            quantity:this.props.quantity,
            selected:false
        }
        
    }


    handleDesc = () => {
        this.setState({currentArticle:this.props.id})
    }

    handlePhoto = () => {
        this.setState({currentArticle:''})
    }

    handleRedCross = () => {
        this.setState({redcrossPressed:true})
    }

    handleNoDelete = () => {
        this.setState({redcrossPressed:false})
    }

    deleteArticle = () => {
        axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.id}`)
        .then(res => {
                console.log(res.data)
                this.setState({redirect:true})
        })
        .catch(error => {
            console.log(error.response)
        })
    }

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

    plusQuantity = () => {
        this.setState({quantity:this.state.quantity+1},()=>{
            this.updateArticle();
    })
    }

    minusQuantity = () => {
        if(this.state.quantity > 0){
            this.setState({quantity:this.state.quantity-1},()=>{
                this.updateArticle();
        })
        }
    }

    selectArticles = (e) => {
        console.log(e.target.id)
        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")){
        this.setState({selected:!this.state.selected},()=>{
            console.log(this.state.selected)
            if (this.state.selected){
                this.props.select()
            } else {
                this.props.deselect()
            }
        })   
        }
    }   

    render(){
        if (this.state.redirect) {
            return (<Redirect to='/stock'/>)
        }
        return(
            this.state.selected ?
            <div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
            {this.state.redcrossPressed ?
            <div id="confirmation">
                <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
                <div id="choice">
                    <div id="yes" onClick={this.deleteArticle}>Oui</div>
                    <div id="no" onClick={this.handleNoDelete}>Non</div>
                </div>
            </div> 
            : 
            <>
            <div id="imageordescblock">
            {this.state.currentArticle === this.props.id ? 
            <>
            <div id="icons">
                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
                    <Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
                </div>
                <div id="redcross" onClick={this.handleRedCross}>
                    <Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
                </div>
            </div>
            <div id="categoryDiv">
                <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
            </div>
            <div id="descandprice">
                <h1 id="desc">{this.props.desc}</h1>
                <p id ="price">{this.props.price} €</p>
            </div>
            </>
            : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
            }
            </div>
                    <h1 id="name">{this.props.name}</h1>
                    <div id="count">
                        <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                        <div id="countNumber">
                            <p id="countNumberTxt">{this.state.quantity}</p>
                        </div>
                        <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                    </div>
            </>        
            }
            </div>
            : 
            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
            {this.state.redcrossPressed ?
            <div id="confirmation">
                <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
                <div id="choice">
                    <div id="yes" onClick={this.deleteArticle}>Oui</div>
                    <div id="no" onClick={this.handleNoDelete}>Non</div>
                </div>
            </div> 
            : 
            <>
            <div id="imageordescblock">
            {this.state.currentArticle === this.props.id ? 
            <>
            <div id="icons">
                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
                    <Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
                </div>
                <div id="redcross" onClick={this.handleRedCross}>
                    <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
                </div>
            </div>
            <div id="categoryDiv">
                <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
            </div>
            <div id="descandprice">
                <h1 id="desc">{this.props.desc}</h1>
                <p id ="price">{this.props.price} €</p>
            </div>
            </>
            : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
            }
            </div>
                    <h1 id="name">{this.props.name}</h1>
                    <div id="count">
                        <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                        <div id="countNumber">
                            <p id="countNumberTxt">{this.state.quantity}</p>
                        </div>
                        <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                    </div>
            </>        
            }
            </div>
        )
    }

}

export default ArticleDetails
