
import {Link} from 'react-router-dom'
import Icons from "../Icons";
import {useMutation} from '@tanstack/react-query'
import {Formik, Form} from 'formik'
import * as Yup from "yup";

import InputText from '../InputText'
import { useEffect } from 'react';
import { useQuery, useQueryClient } from "@tanstack/react-query";
import queryKeys from '../../services/queryKeys';

import {updateUserProfile} from '../../services/siteServices'


export default function UpdateProfile({accountInfo}) {

    const queryClient = useQueryClient();

    const initialValues = {
        firstname: accountInfo?.firstname || "",
        lastname: accountInfo?.lastname || "",
        account_name: accountInfo?.account_name || "",
        phone_number: accountInfo?.phone_number || "",
        email: accountInfo?.email || "",
        address: accountInfo?.address || "",
    };

    // To get the validation schema
    const validationSchema = Yup.object().shape({
        firstname: Yup.string().required("First name is required").min(3, 'must be upto 3 characters').max(25, 'must not exceed 25 characters'),
        lastname: Yup.string().required("Last name is required").min(3, 'must be upto 3 characters').max(25, 'must not exceed 25 characters'),
        account_name: Yup.string().required("Account name is required").min(3, 'must be upto 3 characters').max(25, 'must not exceed 25 characters'),
        phone_number: Yup.string().required("Phone number is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
        email: Yup.string().email('Invalid email format').required("Email is required").max(50, 'must not exceed 50 characters'),
        address: Yup.string().required("Address is required").min(10, 'must be at least 10 characters').max(255, 'must not exceed 255 characters'),
    });

    const updateProfile = useMutation({
        mutationFn: (fields) => {
            return updateUserProfile(fields)
        },
        onError: (error) => {
            console.log(error)
        },
        onSuccess: (res) => {
            console.log('res', res)
            // if(res?.data?.resultCode != '0') {
            //     throw new Error(res?.data?.message || res?.data?.resultDescription || 'An error occurred while updating profile')
            // }
            queryClient.refetchQueries({
                queryKey: [...queryKeys.account_view],
                // type: 'active',
                // exact: true,
            });
        },
        onSettled: () => {
            setTimeout(() => {
                updateProfile.reset()
            }, 3000);
        }
    })

    //FUNCTION TO HANDLE LOGIN
    const handleSubmit = (values, helper) => {
        const newValues= {
            member_uid: accountInfo?.uid || "",
            member_account_name: values?.account_name || "",
            member_firstname: values?.firstname || "",
            member_full_address: values?.address || "",
            member_lastname: values?.lastname || "",
            member_email: values?.email || "",
            member_phone: values?.phone_number || ""
        }

        updateProfile.mutate(newValues)
        console.log('values', newValues)
    };


    return <>
        <div className="flex flex-col gap-1">
            <div className="w-full">
                <h4 className="mb-3 font-semibold text-lg">Edit Your Personal Settings</h4>
            </div>
            <div className="w-full">
                <Formik
                    initialValues={initialValues}
                    validationSchema={validationSchema}
                    onSubmit={handleSubmit}
                >
                    {(props) => (
                        <Form>
                            <div className='flex flex-col gap-8 w-full'>
                                <div className='flex flex-col gap-6'>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>First Name</label>
                                            <span className='text-red-500 text-10'>{(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : ''}</span>
                                        </p>
                                        <InputText
                                            id='firstname'
                                            placeholder='First Name'
                                            name='firstname'
                                            value={props.values.firstname}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>Last Name</label>
                                            <span className='text-red-500 text-10'>{(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : ''}</span>
                                        </p>
                                        <InputText
                                            id='lastname'
                                            placeholder='Last Name'
                                            name='lastname'
                                            value={props.values.lastname}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>Account Name</label>
                                            <span className='text-red-500 text-10'>{(props.errors.account_name && props.touched.account_name) ? props.errors.account_name : ''}</span>
                                        </p>
                                        <InputText
                                            id='account_name'
                                            placeholder='Account Name'
                                            name='account_name'
                                            value={props.values.account_name}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>Phone Number</label>
                                            <span className='text-red-500 text-10'>{(props.errors.phone_number && props.touched.phone_number) ? props.errors.phone_number : ''}</span>
                                        </p>
                                        <InputText
                                            id='phone_number'
                                            placeholder='Phone Number'
                                            name='phone_number'
                                            value={props.values.phone_number}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>Email</label>
                                            <span className='text-red-500 text-10'>{(props.errors.email && props.touched.email) ? props.errors.email : ''}</span>
                                        </p>
                                        <InputText
                                            id='email'
                                            placeholder='Email'
                                            disabled={true}
                                            name='email'
                                            value={props.values.email}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>Address</label>
                                            <span className='text-red-500 text-10'>{(props.errors.address && props.touched.address) ? props.errors.address : ''}</span>
                                        </p>
                                        <InputText
                                            id='address'
                                            placeholder='Address'
                                            name='address'
                                            value={props.values.address}
                                            handleChange={props.handleChange}
                                        />
                                    </div>

                                    <div className='flex justify-end h-10 mb-10'>
                                        <button type='submit' disabled={updateProfile.isPending} className='px-4 h-full bg-primary text-white font-bold rounded-md'>{updateProfile.isPending ? 'loading...' : 'Update Profile'}</button>
                                    </div>

                                    {updateProfile.error &&
                                        <>
                                            <div className="w-full text-center">
                                                <p className='text-red-500 text-sm'>{updateProfile.error.message}</p>
                                            </div>
                                        </>
                                    }
                                    {updateProfile.error &&
                                        <>
                                            <div className="w-full text-center">
                                                <p className='text-emerald-500 text-sm'>{'Profile Updated Successfully'}</p>
                                            </div>
                                        </>
                                    }
                                </div>
                            </div>
                        </Form>
                    )}
                </Formik>
            </div>
        </div>
    </>
}



