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";

const MyProfile = () => {
  let formikUploadImage;
  const [readOnly, setReadOnly] = useState(true);

  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="">
                <div className="bg-white border-div">
                  <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>
                <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-6 d-flex align-items-center">
                            <span className="image-container me-4">
                              <Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
                            </span>
                            <p className="username">John Doe</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 align-items-center">
                            <h2 className="mb-0">Personal Information</h2>
                            {/* onClick={() => setReadOnly(prevState => !prevState)} */}
                            {readOnly && (
                              <div className="btn-edit">
                                <span className="me-3">Edit</span>
                                <span className="image-container">
                                    <Image className="image img-fluid" layout="fill" alt="" src="/images/icons/edit-icon.svg" />
                                </span>
                              </div>
                            )}
                          </div>
                          <div className="row">
                            <div className="col-12 col-lg-5">
                              <div className="input-group">
                                <label>Your First Name</label>
                                <Field
                                  type="text"
                                  name="first_name"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.first_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 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 offset-lg-1 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 type="text" name="mobile" onChange={handleChange} onBlur={handleBlur} value={values.mobile} 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>
                              <span className="image-container">
                                    <Image className="image img-fluid" layout="fill" alt="" src="/images/icons/add-icon.svg" />
                                </span>
                            </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;