import React, { useState } from 'react'
import { Form, Formik } from "formik";
import * as Yup from "yup";

// import LoginImg from '../../assets/bg/login.svg'

import { Link } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import { useMutation } from '@tanstack/react-query';
import { signUpUser } from '../../services/services';

const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email("Wrong email format")
    //   .matches(
    //     /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
    //     "Invalid email format"
    //   )
      .min(3, "Minimum 3 characters")
      .max(50, "Maximum 50 characters")
      .required("Email is required"),
    firstname: Yup.string().required("Firstname is required"),
    lastname: Yup.string().required("Lastname is required"),
    isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
    // username: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
    // password: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
  })

  const initialValues = {
    email: '',
    firstname: '',
    lastname: '',
    isChecked: false,
    // username: '',
    // password: ''
  };

export default function Signup2() {

  const mutation = useMutation({
    mutationFn: (fields) => {
        return signUpUser(fields)
    },
    onSuccess: (res) => {
        console.log('res', res)
    }
  })

  const signUp = (values) => {
    // helpers.resetForm()
    // console.log('values', values, helpers)
    mutation.mutate(values)
  }

  return (
    <div className="app">
        <div className="app-wrap">
            <div className="app-contant">
                <div className="bg-white">
                    <div className="container-fluid p-0">
                        <div className="row no-gutters">
                        <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
                            <div className="d-flex align-items-center h-100-vh">
                                <div className="register p-5">
                                    <h1 className="mb-2">MERMS Panel</h1>
                                    <p>Welcome, Please create your account.</p>
                                    <Formik
                                        initialValues={initialValues}
                                        validationSchema={validationSchema}
                                        onSubmit={signUp}
                                    >
                                        {(props) => {
                                        return (
                                            <Form className='mt-2 mt-sm-5'>
                                                <div className="row">
                                                    {!mutation.isSuccess ?
                                                        <>
                                                            <div className="col-12 col-sm-6">
                                                                <div className="form-group">
                                                                    <label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
                                                                    <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
                                                                </div>
                                                            </div>
                                                            <div className="col-12 col-sm-6">
                                                                <div className="form-group">
                                                                    <label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
                                                                    <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
                                                                </div>
                                                            </div>
                                                            <div className="col-12">
                                                                <div className="form-group">
                                                                    <label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
                                                                    <input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
                                                                </div>
                                                            </div>
                                                            {/* <div className="col-12">
                                                                <div className="form-group">
                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
                                                                    <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
                                                                </div>
                                                            </div>
                                                            <div className="col-12">
                                                                <div className="form-group">
                                                                    <label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
                                                                    <input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
                                                                </div>
                                                            </div> */}
                                                            <div className="col-12">
                                                                <div className="form-check">
                                                                    <input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
                                                                    <label className="form-check-label" htmlFor="gridCheck">
                                                                        I accept terms & policy
                                                                    </label>
                                                                </div>
                                                                <span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
                                                            </div>

                                                            {mutation.error &&
                                                                <>
                                                                <div className="col-12">
                                                                    <p className='text-danger'>{mutation.error.message}</p>
                                                                </div>
                                                                </>
                                                            }

                                                            <div className="col-12 mt-3 text-end">
                                                                <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
                                                            </div>
                                                        </>
                                                        :
                                                        <div className='col-12'>
                                                            <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
                                                                <h4 className='p-4 text-black'>Check your email to continue.</h4>
                                                                <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                            </div>
                                                        </div>
                                                    }
                                                    
                                                    <div className="col-12 mt-3">
                                                        <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                    </div>
                                                </div>
                                            </Form>
                                        );
                                        }}
                                    </Formik>
                                </div>
                            </div>
                        </div>
                            <div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
                                <div className="row align-items-center h-100">
                                    <div className="col-7 mx-auto ">
                                        {/* <img className="img-fluid" src={LoginImg} alt="" /> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
  )
}
