import React, { useState } from 'react'
import "../assets/css/userReg.css"
import Input from './Input'
import Button from './Button'
//Validation
import Grid from '@material-ui/core/Grid';
import {Formik , Form , Field, ErrorMessage} from "formik"
import Cookies from 'js-cookies'
import * as Yup from "yup"
import axios from 'axios'

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure()

function UserReg(props) {
 // The first commit of Material-UI
    const notify = () => toast.success("Hesabınız müvəffəqiyyətlə yaradıldı!");
    const notifyW = () => toast.error("Daxil etdiyiniz məlumatları yanlışdır!");

    const token = Cookies.getItem('XSRF-TOKEN')
    const headers = {
    "X-CSRF-TOKEN":token
    }
    
    
    const phoneRegExp = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/
    const [Error, setError] = useState(false)
        
    const onSubmit =  (values) => {
            axios.post('http://jobday.testjed.me/api/register-jobseeker', {name: values.name , surname: values.surname, email: values.email ,  phone: values.phone , password: values.password,  password_confirmation:values.confirmPassword } , headers)
            .then(res => (res.status === 200 && console.log(res) ,  notify() , props.functionClose()) ) 
            .catch(err => setError(true) )
    }
    
    const initialValues = {
        name:'',
        surname:'',
        email:'',
        phone:'',
        password:'',
        confirmPassword:'',
    }

    const validationSchema = Yup.object({
        name: Yup.string().required('Adınızı daxil edin'),
        surname: Yup.string().required('Soyadınızı daxil edin'),
        email: Yup.string().email('Emailinizi düzgün daxil edin').required('Emailinizi daxil edin'),
        phone:  Yup.string().matches(phoneRegExp, 'Telefon nömrəsini düzgün daxil edin').required('Telefon nömrənizi daxil edin'),
        password: Yup.string().required('Şifrənizi daxil edin'),
        confirmPassword: Yup.string()
        .oneOf([Yup.ref('password'), null], 'Şifrələr uyğun deyil').required("Şifrənizi daxil edin")
    })

    return (
        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit} validateOnChange={true} validateOnBlur={false}>
            <Form className="formUser" method="post">
                <Field placeholder="Adınız"  name="name" className="input"/>
                <div className="errors"><ErrorMessage name="name"/></div>

                <Field placeholder="Soyadınız"  name="surname" className="input"/>
                <div className="errors"><ErrorMessage name="surname"/></div>

                <Field placeholder="Email" name="email" className="input"/>
                <div className="errors"><ErrorMessage name="email"/></div>

                <Field placeholder="Şifrə" type="password" name="password" className="input"/>
                <div className="errors"><ErrorMessage name="password"/></div>

                <Field placeholder="Təkrar şifrə" type="password" name="confirmPassword" className="input"/>
                <div className="errors"><ErrorMessage name="confirmPassword"/></div>

                <div className="checkCont"> <input type="checkbox" name="" id=""/> <label htmlFor="">yadda saxla</label> </div>
                <Button text="Qeydiyyat keç" type="submit"  backgroundColor="#3D92A7"  color="white"/>
            </Form>
        </Formik>
    )
}

export default UserReg