import React, { useEffect, useState } from "react";
import {
  useForm,
  useFieldArray,
  FormProvider,
  useFormContext,
} from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import TagInput from "../common/TagInput";
import IconButton from "../common/IconButton";
import useMaster, {
  useContactCategory,
  useContactTags,
} from "../../hooks/masterHook/useMaster";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import { useBuckets, useOrganization } from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema } from "./DirectorySchema";
import InputSuggestions from "../common/InputSuggestion";

const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
  const selectedMaster = useSelector(
    (store) => store.localVariables.selectedMaster
  );
  const [categoryData, setCategoryData] = useState([]);
  const [TagsData, setTagsData] = useState([]);
  const { data, loading } = useMaster();
  const { buckets, loading: bucketsLoaging } = useBuckets();
  const { projects, loading: projectLoading } = useProjects();
  const { contactCategory, loading: contactCategoryLoading } =
    useContactCategory();
  const { contactTags, loading: Tagloading } = useContactTags();
  const [ IsSubmitting, setSubmitting ] = useState( false );
  const [isInitialized, setIsInitialized] = useState(false);
  const dispatch = useDispatch();
  const {organizationList} = useOrganization()

  const methods = useForm({
    resolver: zodResolver(ContactSchema),
    defaultValues: {
      name: "",
      organization: "",
      contactCategoryId: null,
      address: "",
      description: "",
      projectIds: [],
      contactEmails: [],
      contactPhones: [],
      tags: [],
      bucketIds: [],
    },
  });

  const {
    register,
    handleSubmit,
    control,
    getValues,
    trigger,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = methods;

  const {
    fields: emailFields,
    append: appendEmail,
    remove: removeEmail,
  } = useFieldArray({ control, name: "contactEmails" });

  const {
    fields: phoneFields,
    append: appendPhone,
    remove: removePhone,
  } = useFieldArray({ control, name: "contactPhones" });

  const handleAddEmail = async () => {
    const emails = getValues("contactEmails");
    const lastIndex = emails.length - 1;
    const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
    if (valid) {
      appendEmail({ label: "Work", emailAddress: "" });
    }
  };

  const handleAddPhone = async () => {
    const phones = getValues("contactPhones");
    const lastIndex = phones.length - 1;
    const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
    if (valid) {
      appendPhone({ label: "Office", phoneNumber: "" });
    }
  };

  const watchBucketIds = watch("bucketIds");

  const toggleBucketId = (id) => {
    const updated = watchBucketIds?.includes(id)
      ? watchBucketIds.filter((val) => val !== id)
      : [...watchBucketIds, id];

    setValue("bucketIds", updated, { shouldValidate: true });
  };
  const handleCheckboxChange = (id) => {
    const updated = watchBucketIds.includes(id)
      ? watchBucketIds.filter((i) => i !== id)
      : [...watchBucketIds, id];

    setValue("bucketIds", updated, { shouldValidate: true });
  };

  const onSubmit = async (data) => {
const cleaned = {
  ...data,
  contactEmails: (data.contactEmails || [])
    .filter((e) => e.emailAddress?.trim() !== "")
    .map((email, index) => {
      const existingEmail = existingContact.contactEmails?.[index];
      return existingEmail
        ? { ...email, id: existingEmail.id } 
        : email;
    }),
  contactPhones: (data.contactPhones || [])
    .filter((p) => p.phoneNumber?.trim() !== "")
    .map((phone, index) => {
      const existingPhone = existingContact.contactPhones?.[index];
      return existingPhone
        ? { ...phone, id: existingPhone.id }
        : phone;
    }),
};

setSubmitting(true);
await submitContact({ ...cleaned, id: existingContact.id });

    setSubmitting(false);
    
  };
 const orgValue = watch("organization")
  const handleClosed = () => {
    onCLosed();
  };
  useEffect(() => {
    const isValidContact =
      existingContact &&
      typeof existingContact === "object" &&
      !Array.isArray(existingContact);

    if (!isInitialized &&isValidContact && TagsData) {
      reset({
        name: existingContact.name || "",
        organization: existingContact.organization || "",
        contactEmails: existingContact.contactEmails || [],
        contactPhones: existingContact.contactPhones || [],
        contactCategoryId: existingContact.contactCategory?.id || null,
        address: existingContact.address || "",
        description: existingContact.description || "",
        projectIds: existingContact.projectIds || null,
        tags: existingContact.tags || [],
        bucketIds: existingContact.bucketIds || [],
      } );
      
      if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
      appendPhone({ label: "Office", phoneNumber: "" });
    }

    if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
      appendEmail({ label: "Work", emailAddress: "" });
      }
      setIsInitialized(true)
    }
    
    // return()=> reset()
  }, [ existingContact, buckets, projects ] );
  

  return (
    <FormProvider {...methods}>
      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
        <div className="d-flex justify-content-center align-items-center">
          <h6 className="m-0 fw-18"> Update Contact</h6>
        </div>
        <div className="row">
          <div className="col-md-6  text-start">
            <label className="form-label">Name</label>
            <input
              className="form-control form-control-sm"
              {...register("name")}
            />
            {errors.name && (
              <small className="danger-text">{errors.name.message}</small>
            )}
          </div>

         
          <div className="col-md-6  text-start">
            <label className="form-label">Organization</label>
            <InputSuggestions
          organizationList={organizationList}
          value={getValues("organization") || ""}
          onChange={(val) => setValue("organization", val)}
          error={errors.organization?.message}
        />
            {errors.organization && (
              <small className="danger-text">
                {errors.organization.message}
              </small>
            )}
          </div>
        </div>
        <div className="row mt-1">
          <div className="col-md-6">
            {emailFields.map((field, index) => (
              <div
                key={field.id}
                className="row d-flex align-items-center mb-1"
              >
                <div className="col-5  text-start">
                  <label className="form-label">Label</label>
                  <select
                    className="form-select form-select-sm"
                    {...register(`contactEmails.${index}.label`)}
                  >
                    <option value="Work">Work</option>
                    <option value="Personal">Personal</option>
                    <option value="Other">Other</option>
                  </select>
                  {errors.contactEmails?.[index]?.label && (
                    <small className="danger-text">
                      {errors.contactEmails[index].label.message}
                    </small>
                  )}
                </div>
                <div className="col-7  text-start">
                  <label className="form-label">Email</label>
                  <div className="d-flex align-items-center">
                    <input
                      type="email"
                      className="form-control form-control-sm"
                      {...register(`contactEmails.${index}.emailAddress`)}
                      placeholder="email@example.com"
                    />
                    {index === emailFields.length - 1 ? (
                      // <button
                      //   type="button"
                      //   className="btn btn-xs btn-primary ms-1"
                        
                      //   style={{ width: "24px", height: "24px" }}
                      // >
                        <i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddEmail}/>
                 
                    ) : (
                      // <button
                      //   type="button"
                      //   className="btn btn-xs btn-danger ms-1 p-0"
                      //   onClick={() => removeEmail(index)}
                      //   style={{ width: "24px", height: "24px" }}
                      // >
                        <i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger" onClick={() => removeEmail(index)}/>
              
                    )}
                  </div>
                  {errors.contactEmails?.[index]?.emailAddress && (
                    <small className="danger-text">
                      {errors.contactEmails[index].emailAddress.message}
                    </small>
                  )}
                </div>
              </div>
            ))}
          </div>
          <div className="col-md-6">
            {phoneFields.map((field, index) => (
              <div
                key={field.id}
                className="row d-flex align-items-center mb-2"
              >
                <div className="col-5  text-start">
                  <label className="form-label">Label</label>
                  <select
                    className="form-select form-select-sm"
                    {...register(`contactPhones.${index}.label`)}
                  >
                    <option value="Office">Office</option>
                    <option value="Personal">Personal</option>
                    <option value="Business">Business</option>
                  </select>
                  {errors.phone?.[index]?.label && (
                    <small className="danger-text">
                      {errors.ContactPhones[index].label.message}
                    </small>
                  )}
                </div>
                <div className="col-7  text-start">
                  <label className="form-label">Phone</label>
                  <div className="d-flex align-items-center">
                    <input
                      type="text"
                      className="form-control form-control-sm"
                      {...register(`contactPhones.${index}.phoneNumber`)}
                      placeholder="9876543210"
                    />
                    {index === phoneFields.length - 1 ? (
                      // <button
                      //   type="button"
                      //   className="btn btn-xs btn-primary ms-1"
                      //   onClick={handleAddPhone}
                      //   style={{ width: "24px", height: "24px" }}
                      // >
                        <i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddPhone} />
                    ) : (
                      // <button
                      //   type="button"
                      //   className="btn btn-xs btn-danger ms-1"
                      //   onClick={() => removePhone(index)}
                      //   style={{ width: "24px", height: "24px" }}
                      // >
                        <i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger" onClick={() => removePhone(index)} />
                    )}
                  </div>
                  {errors.contactPhones?.[index]?.phoneNumber && (
                    <small className="danger-text">
                      {errors.contactPhones[index].phoneNumber.message}
                    </small>
                  )}
                </div>
              </div>
            ))}
          </div>
          {errors.contactPhone?.message && (
            <div className="danger-text">{errors.contactPhone.message}</div>
          )}
        </div>

        <div className="row my-1">
          <div className="col-md-6  text-start">
            <label className="form-label">Category</label>
            <select
              className="form-select form-select-sm"
              {...register("contactCategoryId")}
            >
              {contactCategoryLoading && !contactCategory ? (
                <option disabled value="">
                  Loading...
                </option>
              ) : (
                <>
                  <option disabled  value="">
                    Select Category
                  </option>
                  {contactCategory?.map((cate) => (
                    <option key={cate.id} value={cate.id}>
                      {cate.name}
                    </option>
                  ))}
                </>
              )}
            </select>
            {errors.contactCategoryId && (
              <small className="danger-text">
                {errors.contactCategoryId.message}
              </small>
            )}
          </div>
          <div className="col-12 col-md-6 text-start">
            <SelectMultiple
              name="projectIds"
              label="Select Projects"
              options={projects}
              labelKey="name"
              valueKey="id"
              IsLoading={projectLoading}
            />
            {errors.projectIds && (
              <small className="danger-text">{errors.projectIds.message}</small>
            )}
          </div>
        </div>

        <div className="col-12 text-start">
          <TagInput name="tags" label="Tags" options={contactTags} />
          {errors.tags && (
            <small className="danger-text">{errors.tags.message}</small>
          )}
        </div>
        <div className="row">
         <div className="col-md-12 mt-1 text-start">
            <label className="form-label ">Select Label</label>

            <ul className="d-flex flex-wrap px-1 list-unstyled  mb-0">
              {bucketsLoaging && <p>Loading...</p>}
              {buckets?.map((item) => (
                <li
                  key={item.id}
                  className="list-inline-item flex-shrink-0 me-6 mb-2"
                >
                  <div className="form-check ">
                    <input
                      type="checkbox"
                      className="form-check-input"
                      id={`item-${item.id}`}
                      checked={watchBucketIds.includes(item.id)}
                      onChange={() => handleCheckboxChange(item.id)}
                    />
                    <label
                      className="form-check-label"
                      htmlFor={`item-${item.id}`}
                    >
                      {item.name}
                    </label>
                  </div>
                </li>
              ))}
              {errors.bucketIds && (
                <small className="danger-text mt-0">
                  {errors.bucketIds.message}
                </small>
              )}
            </ul>
          </div>
        </div>

        <div className="col-12 text-start">
          <label className="form-label">Address</label>
          <textarea
            className="form-control form-control-sm"
            rows="2"
            {...register("address")}
          />
        </div>

        <div className="col-12 text-start">
          <label className="form-label">Description</label>
          <textarea
            className="form-control form-control-sm"
            rows="2"
            {...register("description")}
          />
          {errors.description && (
            <small className="danger-text">{errors.description.message}</small>
          )}
        </div>

        <div className="d-flex justify-content-center gap-1 py-2">
          <button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
            {IsSubmitting ? "Please Wait..." : "Update"}
          </button>
          <button
            className="btn btn-sm btn-secondary"
            type="button"
            onClick={handleClosed}
            disabled={IsSubmitting}
          >
            Cancel
          </button>
        </div>
      </form>
    </FormProvider>
  );
};

export default UpdateContact;