import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import redirect from '../../utils/redirect';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';

const newPassword = (props) => {

    const [inputState, setInputState] = useState({});
    const [message, setMessage]       = useState("");
    const [isLoading, setIsLoading]   = useState(false);

    const handleChange = () => {
        const inputStateNew = { ...inputState };
        inputStateNew[event.target.name] = event.target.value;
        setInputState(inputStateNew);
    }

    const handleSubmit = (event) => {
        setIsLoading(true);
        event.preventDefault();
        api.put('/users/reset-password', { ...inputState, tempToken: props.token })
            .then(({ data }) => {
                setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
                setIsLoading(false);
                setInputState({});
            })
            .catch((error) => {
                setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
                setIsLoading(false);
            });
    }

    return (
        <Fragment>
            <HeadTag 
                title="Nouveau mot de passe - FunctionProject" 
                description="Mise à jour du mot de passe." 
            />
            <div className="container Register-Login__container">
                <div className="row Register-Login__row justify-content-center">
                    <div className="col-20">
                        <h1 className="Register-Login__title">Nouveau mot de passe</h1>
                        <form onSubmit={handleSubmit}>
                            <div className="form-group">
                                <label className="form-label" htmlFor="password">Mot de passe :</label>
                                <input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
                            </div>
                            <div className="form-group text-center">
                                <button type="submit" className="btn btn-dark">Envoyer</button>
                            </div>
                        </form>
                        <div className="form-result text-center">
                            {
                                (isLoading) ? 
                                    <Loader />
                                :
                                    htmlParser(message)
                            }
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    );
}

export async function getServerSideProps(context) {
    if (context.query.token != undefined) {
        return {
            props: {
                token: context.query.token
            }
        };
    }
    return redirect(context, '/404');
}

export default withoutAuth(newPassword);