import React, {useState} from 'react'
import {Form, Formik} from "formik";
import { Turnstile } from '@marsidev/react-turnstile'
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';
import getImage from '../../utils/getImage';
import AuthFooter from './AuthFooter';

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,
    turnstileToken: '',
    // 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)
        delete values.isChecked
        mutation.mutate(values)
    }

    return (
        <div className="app">
            <div className="app-wrap">
                <div className="app-contant">
                    <div className="vh-100 bg-white custom-bg">
                        <div className="container-fluid p-0">
                            <div className="row no-gutters justify-content-center">
                                <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1"
                                     style={{maxWidth: '520px'}}>
                                    <div className="mt-5 d-flex">
                                        <div className="bg-white register px-5 pt-5 pb-3">
                                            <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</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-md-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-md-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{" "}
                                                                                    <a
                                                                                        href={process.env.REACT_APP_TERMS_LINK}
                                                                                        target="_blank"
                                                                                        rel="noopener noreferrer"
                                                                                        onClick={(e) => e.stopPropagation()}
                                                                                    >
                                                                                        terms & policy
                                                                                    </a>
                                                                                </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="text-center col-12 mt-3">
                                                                            <Turnstile
                                                                                siteKey={process.env.REACT_APP_TURNSTILE_SITE_KEY}      
                                                                                onSuccess={(token) => props.setFieldValue('turnstileToken', token)}
                                                                                onExpire={() => props.setFieldValue('turnstileToken', null)}
                                                                                onError={() => props.setFieldValue('turnstileToken', null)}
                                                                            />  
                                                                        </div>
                                                                        <div className="col-12 mt-3 text-end">
                                                                            <button type='submit'
                                                                                    disabled={!props.values.turnstileToken || mutation.isPending}
                                                                                    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={{backgroundColor: '#F2FAF7'}}>
                                                                            <h4 className='p-4 text-black'
                                                                                style={{marginBottom: '-30px'}}>Check
                                                                                your email to continue.</h4>
                                                                            <img className='' style={{width: '200px'}}
                                                                                 src={getImage('check-mail.png')}
                                                                                 alt='mail-alert'/>
                                                                            <Link to={siteLinks.login}
                                                                                  className='p-2 text-primary'
                                                                                  style={{color: '#6FCAEF'}}>Home</Link>
                                                                        </div>
                                                                    </div>
                                                                }

                                                                <div className="col-12 mt-3">
                                                                    <p>
                                                                        <span style={{paddingLeft: '5px' , fontWeight: 'bolder'}}>Already have an account? </span>
                                                                        <Link
                                                                            to={siteLinks.login}>
                                                                            <button
                                                                                className="btn btn-warning text-uppercase">
                                                                                Sign In
                                                                            </button>
                                                                        </Link>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </Form>
                                                    );
                                                }}
                                            </Formik>
                                            <AuthFooter />
                                        </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>
    )
}