import { useNavigate } from "react-router-dom";
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
import routes from "@/routes";
import { IAnswer } from "@/components/ChatsPath/data";
import Answers from "@/components/ChatsPath/components/Answers";
import InputAnswerModal from "@/components/ChatsPath/components/InputAnswerModal";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { yourGoalAnswers } from "@/components/ChatsPath/data/yourGoalAnswers";

function YourGoal() {
  useUpdateStep(10);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { goal } = useSelector(selectors.selectAnswers);

  const [answer, setAnswer] = useState("");

  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleNext = () => {
    navigate(routes.client.chatsQuizSomethingWorrying());
  };

  const answers: IAnswer[] = yourGoalAnswers[goal]?.map((answer) => {
    return {
      ...answer,
      onClick: answer.value === "other" ? handleOpen : handleNext,
    };
  });

  const handleChangeAnswer = (event: React.ChangeEvent<HTMLInputElement>) => {
    setAnswer(event.target.value);
  };

  const handleModalNext = () => {
    dispatch(
      actions.chats.updateAnswers({
        yourGoal: answer,
      })
    );
    handleNext();
  };

  return (
    <>
      <InputAnswerModal
        open={open}
        onClose={handleClose}
        inputProps={{
          value: answer,
          onChange: handleChangeAnswer,
        }}
        buttonProps={{
          disabled: !answer.length,
          onClick: handleModalNext,
        }}
      />
      <h2 className={`chats-answers-title`}>What is your goal?</h2>
      <Answers answers={answers} />
    </>
  );
}

export default YourGoal;