import React from 'react';
import Icon from '@iconify/react';
import '../../css/Components/editcategory.css'
import plusIcon from '@iconify/icons-fa-solid/plus';
import { Tooltip, Zoom } from '@material-ui/core';
import axios from 'axios';

class EditCategory extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            name: this.props.category.name,
            icon: '',
            errors : []
        }
    }

    handleNameChange  = event => {
        this.setState({name : event.target.value},() => {
            console.log(this.state.name)
        })
    }

    handleIconChange  = event => {
        this.setState({icon : event.target.files[0]},() => {
            console.log(this.state.icon)
        })
    }

    handleSubmit = event => {
        event.preventDefault()

        let formData = new FormData();
        if (this.state.icon) {
            formData.set('icon',this.state.icon)
            axios.post(`https://etud.insa-toulouse.fr/~proximo/v2/api/categories/${this.props.category.id}`,formData)
            .then(res => {
                console.log(res)
                this.setState({errors : []})
            })
            .catch(error => {
                if(error.response.status === 401){
                    this.setState({errors : error.response.data.errors})
                }
                console.log(error.response.data.errors)
            });
        }

        let categoryUpdated = {}
        categoryUpdated.name = this.state.name;
        axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/categories/${this.props.category.id}`,categoryUpdated)
            .then(res => {
                console.log(res)
                this.setState({errors : []})
                window.location.reload()
                this.props.handleCloseAbove()
            })
            .catch(error => {
                if(error.response.status === 401){
                    this.setState({errors : error.response.data.errors})
                }
                console.log(error.response.data.errors)
            });
    }


    render() {
        return (
            <div id="transp">
                <div id="formBody">
                    <div id="formHead">
                        <div id="formHeadTxt">Editer Catégorie</div>
                        <div id="crossClose" onClick={this.props.handleCloseAbove}>
                            <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '3vw'}} />
                        </div>
                    </div>
                    <div id="formMainContent">
                        <form method='POST' onSubmit={this.handleSubmit}>
                            <div id="nameBlock">
                                <div id="nameBlockInput">
                                    <label htmlFor='nameBox'>Nom</label>
                                    <input id="nameBox" onChange={this.handleNameChange} type='text' value={this.state.name}/>
                                </div>
                                <div id="errorNameBlock">
                                    <p id="errorName">{!this.state.name && this.state.errors.name}</p>
                                </div>  
                            </div>
                            <div id="iconBlock">
                                <div id="iconBlockInput">
                                    <Tooltip title="Télécharger la bonne icône surr www.flaticon.com en 512px et l'enregistrer dans le dossier Icônes" TransitionComponent={Zoom} aria-label="Aller sur www.flaticon.com" interactive>
                                        <label htmlFor="iconBox" id="customIconBox">Télécharger une Icône</label>
                                    </Tooltip>
                                    <input id="iconBox" onChange={this.handleIconChange} type='file'/>
                                </div>
                                <div id="errorIconBlock">
                                {!this.state.icon ?
                                    <p id="errorIcon">{this.state.errors.icon}</p>
                                    : <p id="iconName">{this.state.icon.name}</p>}
                                {!this.state.icon &&
                                    <p id="iconName">{this.props.category.icon}</p>
                                }
                                </div> 
                            </div>
                            <button id="button" type='submit'>Modifier</button>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

export default EditCategory;