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

class CreateCategory extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            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 bodyFormData = new FormData()
        bodyFormData.set('name',this.state.name)
        bodyFormData.set('icon',this.state.icon)
        axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/categories',bodyFormData)
            .then(res => {
                console.log(res)
                this.setState({errors : []})
                if (this.props.reload){
                    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">Nouvelle 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'/>
                            </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.name ?
                                <p id="errorIcon">{this.state.errors.icon}</p>
                                : <p id="iconName">{this.state.icon.name}</p>}
                            </div>
                        </div>
                            <button id="button" type='submit'>Ajouter</button>
                    </form>
                </div>
            </div>
        </div>
        );
    }
}

export default CreateCategory;