import React, { useEffect } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import { useLocation } from "react-router-dom";
import { Form, Formik } from "formik";
import * as Yup from "yup";
import { useMutation } from "@tanstack/react-query";
import getImage from "../../utils/getImage";


const validationSchema = Yup.object().shape({
    username: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
  })

  const initialValues = {
    username: '',
  };


export default function HomeSections(){

    const {state:{profile_completed}} = useLocation()

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

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

    return <>
        <BreadcrumbComBS title='Update Profile' paths={['Dashboard', 'Profile']} />

        <div className="row">

            {/*<div className="col-xxl-6 m-b-30">*/}
            {/*    <div className="card card-statistics h-100 mb-0" style={{minHeight: '100px'}}>*/}
            {/*        /!* <div className="card-header d-flex align-items-center justify-content-between">*/}
            {/*            <div className="card-heading">*/}
            {/*                <h4 className="card-title">My Product URLs</h4>*/}
            {/*            </div>*/}
            {/*        </div> *!/*/}
            {/*    </div>*/}
            {/*</div>*/}
            <div className="col-xxl-6 m-b-30">
                <div className="card card-statistics h-100 mb-0">
                    {/* <div className="card-header d-flex align-items-center justify-content-between">
                        <div className="card-heading">
                            <h4 className="card-title">My Product URLs</h4>
                        </div>
                    </div> */}
                    {/* <div style={{minHeight: '400px'}}></div> */}
                    <div className="card-body">
                        <Formik
                            initialValues={initialValues}
                            validationSchema={validationSchema}
                            onSubmit={handleCompleteProfile}
                        >
                            {(props) => {
                            return (
                                <Form className=''>
                                    <div className="row">
                                        <>
                                            <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="username" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
                                                </div>
                                            </div>

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

                                            <div className="col-12 mt-3 text-end">
                                                <button type='submit' className="btn btn-primary text-uppercase">{false ? 'loading...' : 'Continue'}</button>
                                            </div>
                                        </>
                                    </div>
                                </Form>
                            );
                            }}
                        </Formik>
                    </div>
                </div>
            </div>
            <div className="col-xxl-6 m-b-30">
                <div class="img-block left-column wow fadeInRight">
                    <img className="img-fluid" src={getImage('img-07.png')}  alt="content-image" />
                </div>
            </div>
        </div>
    </>;

}