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";
import { IoMdArrowDropdown } from "react-icons/io";
import { completeProfile } from '../../services/services';


const validationSchema = Yup.object().shape({
    practice: Yup.string().required("Required"),
    specialization: Yup.string().required("Required"),
    information: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"),
  })

  const initialValues = {
    practice: '',
    specialization: '',
    information: '',
  };


export default function ProfileCompleteCom(){

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

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

    const handleCompleteProfile = (values, helpers) => {
    // helpers.resetForm()
    let reqData = {
        token: localStorage.getItem('token'), // USER TOKEN
        uid: localStorage.getItem('uid'), // USER UID
        // ...values
    }
    console.log('values', values, helpers)
    // mutation.mutate(reqData)
    }

    return <>

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

        <div className="row pt-1">

            {/*<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-md-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='h-100 row flex-column'>
                                    {/* <div className="row"> */}
                                        <>
                                            <div className="">
                                                <div className="form-group position-relative">
                                                    <label className={`text-black fw-bold control-label ${(props.errors.practice && props.touched.practice) && 'text-danger'}`}>Practice :</label>
                                                    <div className="position-relative">    
                                                        <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
                                                            <option value=''>Select</option>
                                                            <option value='engineering'>Engineering</option>
                                                        </select>
                                                        <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
                                                    </div>
                                                </div>
                                            </div>

                                            <div className="">
                                                <div className="form-group">
                                                    <label className={`text-black fw-bold control-label ${(props.errors.specialization && props.touched.specialization) && 'text-danger'}`}>Specialization :</label>
                                                    <div className="position-relative">
                                                        <select onChange={props.handleChange} name='specialization' value={props.values.specialization} className="form-control">
                                                            <option value=''>Select</option>
                                                            <option value='construction'>Construction</option>
                                                        </select>
                                                        <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
                                                    </div>
                                                </div>
                                            </div>

                                            <div className="">
                                                <div className="form-group position-relative">
                                                    <label className={`text-black fw-bold control-label ${(props.errors.information && props.touched.information) && 'text-danger'}`}>General Information :</label>
                                                    <textarea name='information' rows={10} style={{resize: 'none'}} className="form-control" value={props.values.information} onChange={props.handleChange} />
                                                </div>
                                            </div>
                               

                                            {/* {(mutation.isErrorrror || mutation.isSuccess) &&
                                                <>
                                                <div className="col-12">
                                                    <p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully' : mutation.error.message}</p>
                                                </div>
                                                </>
                                            } */}

                                            <div className="mt-auto 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-md-6 m-b-30">
                <div class="text-center img-block left-column wow fadeInRight">
                    <img className="img-fluid" src={getImage('img-07.png')} alt="content-image" />
                </div>
            </div>
        </div>
    </>;

}