import React, { useEffect } from "react";
import {
  processTags,
} from "./formUtil";
import {
  useAddQuestion,
  useDeleteQuestion,
  useGetAllQuestion,
  useUpdateQuestion,
} from "../../../api/Question";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { removeStringKeys } from "../../../utils/removeStringKeys";
import SpinContainer from "../../../Components/Layout/SpinContainer";
import { Question } from "../../../types/Item";
import { toast } from "react-toastify";
import { deletePathSegments } from "../../../utils/deletePathSegments";
import BaseFormContainer from "./Model/EditForm/BaseFormContainer";
import FormContainer from "./Model/EditForm/FormContainer";

const EditPage: React.FC = () => {
  const { subject_id, lesson_id, question_id } = useParams<ParamsEnum>();
  const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions, ShowHint, setShowHint, ShowLatexOption, setShowLatexOption } =
    useObjectToEdit();

  const { mutate, isSuccess, isLoading } = useUpdateQuestion();
  const { mutate: DeleteQuestion } = useDeleteQuestion();
  const { mutate: mutateAdd, isLoading: LoadingAsync } = useAddQuestion();

  const { data, isLoading: dataLoading } = useGetAllQuestion({
    show: question_id,
  });

  const { data: Questions, isLoading: QuestionsDataLoading } =
    useGetAllQuestion({
      parent_id: question_id,
      isPaginated: false
    });

  const objectToEdit = { ...data?.data, Questions: Questions?.data };

  useEffect(() => {
    if (objectToEdit?.isBase && isBseQuestion !== true) {
      setIsBseQuestion(true);
    }
  }, [objectToEdit?.isBase]);

  const [t] = useTranslation();

  const handleSubmit = (values: any) => {
    const DataToSend = structuredClone(values);
    setTagsSearch(null);

    if (isBseQuestion) {

      const UpdateBseQuestion = {
        id: DataToSend?.id,
        content: DataToSend?.content,
        content_image: DataToSend?.content_image ?? "",
      };
      if (
        typeof UpdateBseQuestion?.content_image === "string" &&
        UpdateBseQuestion?.content_image !== ""
      ) {
        delete UpdateBseQuestion["content_image"];
      }
      console.log(DeletedQuestions, "DeletedQuestions");
      console.log(UpdateBseQuestion);

      mutate(UpdateBseQuestion);

      DeletedQuestions?.map((item: any) => {
        DeleteQuestion({ id: item?.id });
      });

      const Questions = DataToSend?.Questions;
      console.log(Questions, "Questions");

      Questions?.map((item: Question) => {
        console.log(item);
        if (item?.id) {
          const itemToSend = structuredClone(item);
          const keysToRemove = ["content_image"];
          console.log(itemToSend, "itemToSend");

          const updatedObject = removeStringKeys(itemToSend, keysToRemove);
          console.log(updatedObject, "updatedObject");

          const tags = processTags(updatedObject);
          const oldAnswers = [] as any;
          const newAnswers = [] as any;

          if (updatedObject?.content_image === null) {
            updatedObject["content_image"] = ""
          }

          updatedObject?.answers?.forEach((item: any) => {
            if (item?.id) {
              if (item?.content_image === null) {
                item["content_image"] = ""

              }
              oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
            } else {
              newAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
            }
          });
          const answers = {
            old: oldAnswers,
            new: newAnswers,
          };
          const emptyTag = tags?.new?.length === 0 && tags?.old?.length === 0
          const tagToSend = emptyTag ? "" : tags
          mutate({
            ...updatedObject,
            answers,
            tags: tagToSend,
          });
        } else {
          console.log(values?.id);

          const tags = processTags(item);
          console.log(item, "DataToSend");

          console.log(tags, "tags");
          mutateAdd({
            ...item,
            subject_id: subject_id,
            tags,
            lessons_ids: [lesson_id],
            parent_id: values?.id,
          });
        }
      });
    } else {
      const keysToRemove = ["content_image"];
      console.log(DataToSend);
      const updatedObject = removeStringKeys(DataToSend, keysToRemove);
      delete updatedObject["parent_id"];
      const tags = processTags(updatedObject);
      if (!values?.content_image) {
        updatedObject["content_image"] = "";
      }

      const oldAnswers = [] as any;
      const newAnswers = [] as any;
      updatedObject?.answers?.forEach((item: any) => {
        if (item?.id) {
          console.log(item, "item");
          const deletedImage = item?.content_image === null
          if (deletedImage) {
            oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0, content_image: "" });

          } else {
            oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });

          }
        } else {
          newAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
        }
      });

      const answers = {
        old: oldAnswers,
        new: newAnswers,
      };
      console.log(tags, "tags");
      if (tags?.new?.length < 1 && tags?.old?.length < 1) {
        mutate({ ...updatedObject, answers, tags: "" });
      } else {
        mutate({ ...updatedObject, answers, tags });
      }
    }
  };

  const location = useLocation();
  const navigate = useNavigate();

  const handleValidateSingleQuestion = (values: any, isValid: boolean, handleSubmit: any) => {
    const haveMoreThanOneAnswer = values?.answers?.length > 1;
    const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true)
    const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item: any) => !(item?.content) && !(item.content_image))
    const content = values.content;
    const content_image = values.content_image;
    const haveContentOrContentImage = !!content || !!content_image;
    console.log(haveImageOrContent, "haveImageOrContent");
    if (!haveContentOrContentImage) {
      toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
      return false;
    }

    if (!haveMoreThanOneAnswer) {
      toast.error(t("validation.it_should_have_more_than_one_answers"));
      return false;
    }
    if (!haveOneAnswerRight) {
      toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
      return false;
    }
    if (haveImageOrContent) {
      toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
      return false
    }

    console.log(1);

    if (isValid) {
      handleSubmit(values)
    }

  }
  const handleValidateBaseQuestion = (values: any, isValid: boolean, handleSubmit: any) => {
    const content = values.content;
    const content_image = values.content_image;
    const haveContentOrContentImage = !!content || !!content_image;
    console.log(2);

    if (!haveContentOrContentImage) {
      toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
      return false;
    }
    console.log(1);

    const isValidate = values?.Questions?.every((Question: any, QuestionsIndex: number) => {


      const content = Question.content;
      const content_image = Question.content_image;
      const haveContentOrContentImage = !!content || !!content_image;
      if (!haveContentOrContentImage) {
        toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
        return false;
      }


      //// answers
      const answers = Question?.answers;
      const haveAnswers = answers?.length > 0;
      const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
      const haveOneAnswerRight = haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
      const haveImageOrContent = haveOneAnswerRight && answers?.some((item: any) => !(item?.content) && !(item.content_image))




      if (!haveAnswers) {
        toast.error(t("validation.it_should_have_more_than_one_answers"));
        return false;
      }

      if (!haveMoreThanOneAnswer) {
        toast.error(t("validation.it_should_have_more_than_one_answers"));
        return false;
      }

      if (!haveOneAnswerRight) {
        toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
        return false;
      }

      if (haveImageOrContent) {
        toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
        return false
      }

      return true
    });

    console.log(1);

    if (isValid && isValidate) {
      console.log(2);
      handleSubmit(values)
    }

  };

  useEffect(() => {
    if (isSuccess) {
      toast.success(t("validation.the_possess_done_successful"));
      navigate(deletePathSegments(location.pathname, 2));
    }
  }, [isSuccess]);




  const Loading = LoadingAsync || isLoading

  if (dataLoading || QuestionsDataLoading) {
    return <SpinContainer />;
  }
  if (objectToEdit?.isBase) {
    return (
      <BaseFormContainer t={t} Loading={Loading} handleSubmit={handleSubmit} handleValidateBaseQuestion={handleValidateBaseQuestion} objectToEdit={objectToEdit} />
    );
  }


  return (
    <FormContainer t={t} Loading={Loading} handleSubmit={handleSubmit} handleValidateSingleQuestion={handleValidateSingleQuestion} objectToEdit={objectToEdit} />
  );
};

export default EditPage;