import React, {Component} from "react";
import {Button, Col, Form, Modal} from "react-bootstrap";

class JustAbs extends Component {
    constructor(props){
        super(props)
        this.state = {
            isOpen: false,
            etudid: "",
            date: ""
        }
    }

    openModal = () => this.setState({ isOpen: true });
    closeModal = () => this.setState({ isOpen: false });

    componentDidUpdate(prevProps) {
        if (prevProps.open !== this.props.open) {
            this.setState({etudid: this.props.etudid})
            if (this.props.open === true) {
                this.setState({isOpen: true})
            }
            // Recuperation et conversion de la date par defaut de l'absence (Format ISO demandé par les form Bootstrap)
            let date = this.props.data.date.split("/")
            date = new Date(date[2] + "-" + date[1] + "-" + date[0])
            date = date.toISOString().substr(0,10);
            this.setState({date: date})
        }
    }

    postData(data) {
        let dept = window.location.href.split('/')[6]
        let BASE_URL = window.$api_url
        fetch(BASE_URL + dept + "/Scolarite/Absences/doJustifAbsence", {
            method: 'POST',
            verify: false,
            credentials: 'include',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: data
        })
        // Fermeture du modal
        this.setState({isOpen: false})
    }

    onFormSubmit = e => {
        // Traitement du formulaire
        // Empeche le bouton de rediriger ou actualiser la page
        e.preventDefault()
        // Recuperation des valeurs
        const formData = new FormData(e.target), formDataObj = Object.fromEntries(formData.entries())

        let reqstr = "etudid=" + this.state.etudid + "&datedebut=" + this.props.data.date

        if (formDataObj.hasOwnProperty('dateFin') && formDataObj['dateFin'] !== "") {
            let dateFin = formDataObj['dateFin'].split("-")
            dateFin = dateFin[2] + "/" + dateFin[1] + "/" + dateFin[0]
            reqstr += "&datefin=" + dateFin
        } else {
            reqstr += "&datefin=" + this.props.data.date
        } if (formDataObj.hasOwnProperty('duree')) {
                reqstr += "&demijournee=" + formDataObj['duree']
        } else {
            reqstr += "&demijournee=" + this.props.data.demijournee
        } if (formDataObj.hasOwnProperty('motif') && formDataObj['motif'] !== "") {
                reqstr += "&description=" + formDataObj['motif']
        }
        this.postData(reqstr)
    }

    render() {
        return (
            <>
                <Modal show={this.state.isOpen} onHide={this.closeModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>Suppression d'absence</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form onSubmit={this.onFormSubmit}>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="dateDebut">
                                    <Form.Label>Date début</Form.Label>
                                    <Form.Control type="date" name="dateDebut" defaultValue={this.state.date} readOnly/>
                                </Form.Group>
                                <Form.Group as={Col} ControlId="dateFin">
                                    <Form.Label>Date fin (Optionnel)</Form.Label>
                                    <Form.Control type="date" name="dateFin" defaultValue={this.state.date}/>
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="duree">
                                    <Form.Check inline label="Journée" name="duree" type="radio" value="2"/>
                                    <Form.Check inline label="Demie-journée" name="duree" type="radio" defaultValue={this.props.data.demijournee} checked/>
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="motif">
                                    <Form.Label>Motif</Form.Label>
                                    <Form.Control as="textarea" rows={3} name="motif"/>
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Button type="submit" variant="primary">Sauvegarder</Button>
                            </Form.Row>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={() => {this.closeModal()}}>Fermer</Button>
                    </Modal.Footer>
                </Modal>
            </>
        )
    }
}

export default JustAbs