import { useFormikContext } from "formik";
import React from "react";
import { useTranslation } from "react-i18next";
import { FaCirclePlus } from "react-icons/fa6";
import Tag from "./Tag";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import { useGetAllTag } from "../../../../../api/tags";

const DynamicTags = ({ parent_index }: { parent_index: number }) => {
  const formik = useFormikContext<any>();
  const [t] = useTranslation();
  const { TagsSearch, setTagsSearch, currentTag, currentParentIndex } =
    useObjectToEdit();
  const { data } = useGetAllTag({
    name: TagsSearch,
  });
  const suggests = data?.data;

  const handleAddChoice = () => {
    const length = formik?.values?.Questions?.[parent_index]?.tags.length;
    const lastElement =
      formik?.values?.Questions?.[parent_index]?.tags[length - 1]?.name;
    setTagsSearch(null);

    if (lastElement !== "") {
      formik.setFieldValue(`Questions.[${parent_index}].tags`, [
        ...((formik?.values as any)?.Questions?.[parent_index]?.tags as any[]),

        {
          id: length + "_new",
          name: "",
          key: length,
        },
      ]);
    } else {
    }
  };
  // console.log(formik?.values);
  // console.log(currentTag);

  const handleChoice = (item: any) => {
    const length = formik?.values?.Questions?.[parent_index]?.tags?.length;
    console.log(currentTag);

    formik.setFieldValue(`Questions.[${parent_index}].tags[${currentTag}]`, {
      ...item,
      key: length,
    });
    setTagsSearch(null);
  };

  // console.log(formik?.values?.tags?.length);

  return (
    <div className="DynamicTags">
      {formik?.values?.Questions?.[parent_index]?.tags?.length < 1 && (
        <p className="add_new_button">
          <FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
          {t("header.add_tag")}
        </p>
      )}

      <div className="tag_container">
        <div className="tags">
          {(
            ((formik?.values as any)?.Questions?.[parent_index]
              ?.tags as any[]) || []
          ).map((item: any, index: number) => {
            return (
              <Tag
                key={index}
                parent_index={parent_index}
                index={index}
                data={item}
              />
            );
          })}
        </div>

        {formik?.values?.Questions?.[parent_index]?.tags?.length > 0 && (
          <p className="add_new_button">
            <FaCirclePlus onClick={handleAddChoice} size={20} />
          </p>
        )}
      </div>
      {TagsSearch && currentParentIndex === parent_index && (
        <div className="suggests">
          {suggests?.map((item: any, index: number) => {
            console.log(currentParentIndex === parent_index);

            return (
              <div
                className="suggested"
                key={index}
                onClick={() => handleChoice(item)}
              >
                {item?.name}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default DynamicTags;
