import { Field, Formik } from 'formik';
import Image from 'next/image';
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Button, Form, Table } from 'react-bootstrap';
import * as Yup from "yup";
import { renderImage } from '../../services/imageHandling';
import { useSelector } from 'react-redux';

const MyProfile = () => {
    let formikUploadImage;
    const [readOnly, setReadOnly] = useState(true);
    const { endUser } = useSelector(state => state.endUser);
    console.log("users info", endUser);
    const profileValidationSchema = Yup.object().shape({
        first_name: Yup.string()
            .required("First Name is Required"),
        last_name: Yup.string()
            .required("Last Name is Required"),
        email: Yup.string()
            .required("Email Id is Required")
            .email("Please Enter An Valid Email Id"),
        country_code: Yup.string()
            .required("Country Code is Required"),
        mobile: Yup.string()
            .required("Mobile Number is Required")
            .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
        password: Yup.string()
    });

    const addressesValidationSchema = Yup.object().shape({
        addresses: Yup.array().of(
            Yup.object().shape({
                pincode: Yup.string().required('Pincode is required'),
                country: Yup.string().required('Country is required'),
                state: Yup.string().required('State is required'),
                city: Yup.string().required('City is required'),
                addressLine1: Yup.string().required('Address Line1 is required'),
                addressLine2: Yup.string().required('Adrress Line2 is required')
            })
        )
    });

    const profileInitialValue = {
        first_name: "John",
        last_name: "Doe",
        email: "john@gmail.com",
        country_code: "+1 (406)",
        mobile: "785-9909",
        password: "*********"
    }

    // Ref for the first input field
    const firstFieldRef = useRef(null);

    // Effect to focus on the first field when entering edit mode
    useEffect(() => {
        console.log("firstFieldRef", readOnly, firstFieldRef.current)
        if (!readOnly && firstFieldRef.current) {
            firstFieldRef.current.focus();
        }
    }, [readOnly]);

    const handleProfileUploadChange = (event) => {
        console.log(event)
        console.log(event?.currentTarget?.files[0])
        formikUploadImage.setFieldValue("profile_image", event.currentTarget.files[0]);
        formikUploadImage.submitForm()
    }

    return (
        <Fragment>
            <div className="container">
                <div className="row">
                    <div className="col-12 col-lg-12">
                        <div className="form-container content-wraaper">
                            <div className='px-5'>
                                <h2>My Profile</h2>


                                {/* <Table className='abc'>
                                    <thead>
                                        <tr>
                                            <th>1</th>
                                            <th>2</th>
                                            <th>3</th>
                                            <th>4</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr className='main'>
                                            <td rowSpan={3}>1</td>
                                        </tr>
                                        <tr className='sub1'>
                                            <td>11</td>
                                            <td>22</td>
                                            <td>33</td>
                                        </tr>
                                        <tr className='sub2'>
                                            <td>11</td>
                                            <td>22</td>
                                            <td>33</td>
                                        </tr>

                                        <tr className='main'>
                                            <td rowSpan={3}>1</td>
                                        </tr>
                                        <tr className='sub'>
                                            <td>11</td>
                                            <td>22</td>
                                            <td>33</td>
                                        </tr>
                                        <tr className='sub'>
                                            <td>11</td>
                                            <td>22</td>
                                            <td>33</td>
                                        </tr>
                                    </tbody>
                                </Table> */}
                                <div className="bg-white border-div">
                                    <Formik
                                        initialValues={{ profile_image: null }}
                                        validationSchema={Yup.object().shape({
                                            profile_image: Yup.mixed().required("Profile Image is Required")
                                        })}
                                        enableReinitialize={true}
                                        onSubmit={values => {
                                            console.log("profile image", values)

                                            // onSubmit: async (values, { setSubmitting }) => {
                                            //     setSubmitting(true);
                                            //     try {
                                            //       const formData = new FormData();
                                            //       formData.append("file", values.file);

                                            //       // Use Axios to send the file data to the server
                                            //       const response = await axios.post("/upload", formData, {
                                            //         headers: {
                                            //           "Content-Type": "multipart/form-data"
                                            //         }
                                            //       });

                                            //       console.log("File uploaded successfully:", response.data);
                                            //     } catch (error) {
                                            //       console.error("Error uploading file:", error);
                                            //     }
                                            //     setSubmitting(false);
                                            //   }
                                        }}
                                        innerRef={formik => {
                                            // Store Formik instance in a variable
                                            formikUploadImage = formik;
                                        }}
                                    >
                                        {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                                            <Form
                                                onSubmit={e => {
                                                    e.preventDefault();
                                                    handleSubmit();
                                                    console.log(errors)
                                                }}
                                            >
                                                <div className="row align-items-center justify-content-between">
                                                    <div className="col-lg-12 d-flex align-items-center">
                                                        <span className="image-container me-4 profile-img-s">
                                                            <Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
                                                        </span>
                                                        <p className="username">
                                                            {endUser?.attributes?.name}
                                                        </p>
                                                    </div>
                                                    {/* <div className="col-lg-4">
                                                        <label className="uploadProfileImage" htmlFor="file-upload">
                                                            <p className="mb-0">Upload Profile Photo</p>
                                                            <Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
                                                        </label>
                                                        <input
                                                            type="file"
                                                            id="file-upload"
                                                            name="profile_image"
                                                            onChange={handleProfileUploadChange}
                                                            // onBlur={handleBlur}
                                                            style={{ display: "none" }}
                                                            onClick={event => {
                                                                const { target = {} } = event || {};
                                                                target.value = "";
                                                            }}
                                                        />
                                                        {errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
                                                    </div> */}
                                                </div>
                                            </Form>
                                        )}
                                    </Formik>
                                </div>
                                <div className="bg-white border-div">
                                    <Formik
                                        initialValues={profileInitialValue}
                                        validationSchema={profileValidationSchema}
                                        enableReinitialize={true}
                                        onSubmit={values => {
                                            console.log("profile personal details", values)
                                        }}
                                    >
                                        {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                                            <Form
                                                onSubmit={e => {
                                                    e.preventDefault();
                                                    handleSubmit();
                                                }}
                                            >
                                                <>
                                                    <div className="d-flex justify-content-between mb-4">
                                                        <h2 className="mb-0">Personal Information</h2>
                                                        {/* onClick={() => setReadOnly(prevState => !prevState)} */}
                                                        {/* {readOnly && (
                                                            <div className="btn-edit">
                                                                <span className="me-3">Edit</span>
                                                                <i className="fa fa-edit"></i>
                                                            </div>
                                                        )} */}
                                                    </div>
                                                    <div className="row">
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Your Full Name</label>
                                                                <Field
                                                                    type="text"
                                                                    name="first_name"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={endUser?.attributes?.name}
                                                                    readOnly={readOnly}
                                                                    innerRef={firstFieldRef}
                                                                />
                                                                {/* {errors.first_name && touched.first_name && (<span className="form-error">{errors.first_name}</span>)} */}
                                                            </div>
                                                        </div>
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Email Id</label>
                                                                <Field
                                                                    type="text"
                                                                    name="email"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={endUser?.attributes?.email}
                                                                    readOnly={readOnly}
                                                                />
                                                                {/* {errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} */}
                                                            </div>
                                                        </div>
                                                        {/* <div className="col-12 offset-lg-1 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Your Last Name</label>
                                                                <Field
                                                                    type="text"
                                                                    name="last_name"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={values.last_name}
                                                                    readOnly={readOnly}
                                                                />
                                                                {errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)}
                                                            </div>
                                                        </div> */}
                                                    </div>
                                                    <div className="row">
                                                        {/* <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Email Id</label>
                                                                <Field
                                                                    type="text"
                                                                    name="email"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={values.email}
                                                                    readOnly={readOnly}
                                                                />
                                                                {errors.email && touched.email && (<span className="form-error">{errors.email}</span>)}
                                                            </div>
                                                        </div> */}
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Mobile Number</label>
                                                                <div className="contact-number">
                                                                    {/* {readOnly && (
                                                                        <Field
                                                                            type="text"
                                                                            name="country_code"
                                                                            onChange={handleChange}
                                                                            onBlur={handleBlur}
                                                                            value={values.country_code}
                                                                            readOnly={readOnly}
                                                                            style={{ width: "80px" }}
                                                                        />
                                                                    )} */}
                                                                    {!readOnly && (
                                                                        <select
                                                                            id="country_code"
                                                                            name="country_code"
                                                                            onChange={handleChange}
                                                                            onBlur={handleBlur}
                                                                            style={{ width: "80px" }}
                                                                        >
                                                                            <option value="+91">+91</option>
                                                                            <option value="+44">+44</option>
                                                                        </select>
                                                                    )}
                                                                    <Field
                                                                    className='m-0'
                                                                        type="text"
                                                                        name="mobile"
                                                                        onChange={handleChange}
                                                                        onBlur={handleBlur}
                                                                        value={endUser?.attributes?.phone}
                                                                        readOnly={readOnly}
                                                                    />
                                                                </div>
                                                                {/* {errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)} */}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {/* <div className="row">
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Current Password</label>
                                                                <input
                                                                    type="text"
                                                                    name="password"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={values.password}
                                                                    readOnly={readOnly}
                                                                    disabled={true}
                                                                />
                                                            </div>
                                                        </div>
                                                    </div> */}
                                                </>
                                            </Form>
                                        )}
                                    </Formik>
                                </div>


                                {/* <div className="bg-white border-div">
                                    <Formik
                                        initialValues={{
                                            addresses: [
                                                {
                                                    pincode: "",

                                                }
                                            ]
                                        }}
                                        validationSchema={addressesValidationSchema}
                                        // enableReinitialize={true}
                                        onSubmit={values => {
                                            console.log("profile address details", values)
                                        }}
                                    >
                                        {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                                            <Form
                                                onSubmit={e => {
                                                    e.preventDefault();
                                                    handleSubmit();
                                                }}
                                            >
                                                <>
                                                    <div className="d-flex justify-content-between mb-4">
                                                        <h2 className='mb-0'>Address</h2>
                                                        <div className="btn-edit">
                                                            <span className="me-3">Add</span>
                                                            <i className="fa fa-plus"></i>
                                                        </div>
                                                    </div>
                                                    <div className="row">
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Pincode</label>
                                                                <input
                                                                    type="text"
                                                                    name="pincode"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={values.pincode}
                                                                />
                                                                {errors.pincode && touched.pincode && (<span className="form-error">{errors.pincode}</span>)}
                                                            </div>
                                                        </div>
                                                        <div className="col-12 offset-lg-1 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Country</label>
                                                                <select
                                                                    id="country"
                                                                    name="country"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                >
                                                                    <option value="India">India</option>
                                                                    <option value="America">America</option>
                                                                </select>
                                                                {errors.country && touched.country && (<span className="form-error">{errors.country}</span>)}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="row">
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>State</label>
                                                                <select
                                                                    id="state"
                                                                    name="state"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                >
                                                                    <option value="India">India</option>
                                                                    <option value="America">America</option>
                                                                </select>
                                                                {errors.state && touched.state && (<span className="form-error">{errors.state}</span>)}
                                                            </div>
                                                        </div>
                                                        <div className="col-12 offset-lg-1 col-lg-5">
                                                            <div className="input-group">
                                                                <label>City</label>
                                                                <select
                                                                    id="city"
                                                                    name="city"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                >
                                                                    <option value="India">India</option>
                                                                    <option value="America">America</option>
                                                                </select>
                                                                {errors.city && touched.city && (<span className="form-error">{errors.city}</span>)}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="row">
                                                        <div className="col-12 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Address Line 1</label>
                                                                <input
                                                                    type="text"
                                                                    name="addressLine1"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={values.addressLine1}
                                                                />
                                                                {errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
                                                            </div>
                                                        </div>
                                                        <div className="col-12 offset-lg-1 col-lg-5">
                                                            <div className="input-group">
                                                                <label>Address Line 2</label>
                                                                <input
                                                                    type="text"
                                                                    name="addressLine2"
                                                                    onChange={handleChange}
                                                                    onBlur={handleBlur}
                                                                    value={values.addressLine2}
                                                                />
                                                                {errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </>
                                            </Form>
                                        )}
                                    </Formik>
                                </div> */}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}

export default MyProfile;