import Icon from '@iconify/react';
import React, { Component } from 'react';
import '../../css/Components/categories.css'
import plusIcon from '@iconify/icons-fa-solid/plus';
import editSolid from '@iconify/icons-clarity/edit-solid';
import axios from 'axios';
import AppLoader from './AppLoader';

class Categories extends Component {
    constructor(props) {
        super(props);
        this.state={
            categories:[],
            categoryFocused:this.props.currentCategory,
            redCrossPressed:false
        }
    }

    componentDidMount() {
        this.getCategories()
    }

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

    handleSwitchCategory = category => {
        if (!this.state.redCrossPressed){
        this.setState({categoryFocused:category})
        }
    }

    handleDeleteCategory = () => {
        axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/categories/${this.state.categoryFocused.id}`)
        .then(res => {
            this.getCategories()
            this.setState({categoryFocused:this.state.categories[0]})
            this.handleNoDelete()
                console.log(res.data)
        })
        .catch(error => {
            console.log(error.response)
        })
    }

    handleDisplayConfirmation = () => {
        this.setState({redCrossPressed:true})
    }

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

    render() {
        return (
            <div id="transp">
                <div id="formBody">
                    <div id="formHead">
                        <div id="formHeadTxt">Catégories</div>
                        <div id="crossClose" onClick={this.props.handleCloseAbove}>
                            <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '3vw'}} />
                        </div>
                    </div>
                    <div id="mainContent">
                        {this.state.redCrossPressed ?
                            <div id="confirmationBlock">
                                <div id="confirmationBlockTxt">Tu veux vraiment supprimer cet article ?</div>
                                <div id="choiceBlock">
                                    <div id="yesBlock" onClick={this.handleDeleteCategory}>Oui</div>
                                    <div id="noBlock" onClick={this.handleNoDelete}>Non</div>
                                </div>
                            </div> 
                        :
                        <>
                        <div id="categoryFocused">
                            <div id="bluePenBlock">
                                <div onClick={() => this.props.handleEditCategory(this.state.categoryFocused)} id="bluePen">
                                    <Icon icon={editSolid} style={{color: '#ffffff', fontSize: '2vw'}} rotate="270deg" />
                                </div>
                            </div>
                            <div id="catBigIconBlock">
                                <img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
                            </div>
                            <div id="redCrossBlock">
                                <div onClick={this.handleDisplayConfirmation} id="redCross">
                                    <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)',color: '#ffffff', fontSize: '2vw'}}/>
                                </div>
                            </div>
                        </div>
                        <div id="currentCategoryName">
                                {this.state.categoryFocused.name}
                        </div>
                        </>}
                        
                        <div id="categoryList">
                        {this.state.categories && this.state.categories[0] ?
                            this.state.categories.map((category)=>
                            {if (category.id !== this.state.categoryFocused.id){
                            return(<div onClick={() => this.handleSwitchCategory(category)} key={category.id} id="categoryItem">
                                <div id="categoryItemIcon">
                                    <img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${category.icon}`} alt='bonjour'/>
                                </div>
                                <div id="categoryItemName">
                                    {category.name}
                                </div>
                            </div>)
                            } else{
                            return(null)
                            }}
                            )
                            : <AppLoader/>}
                        </div>
                        
                    </div>
                </div>
            </div>
        );
    }
}


export default Categories;