import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { DatePicker } from "@/components/DateTimePicker";
import { useState } from "react";
import Button from "@/components/ChatsPath/ui/Button";
import ZodiacWheel from "@/components/ChatsPath/components/ZodiacWheel";
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Date() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const { updateSession } = useSession();
  const dispatch = useDispatch();
  useUpdateStep(4);
  const navigate = useNavigate();
  const birthdate = useSelector(selectors.selectBirthdate);
  const [isDisabled, setIsDisabled] = useState(true);

  const handleNext = async () => {
    await updateSession(
      {
        profile: {
          birthdate: `${birthdate} 00:00`,
        },
      },
      ESourceAuthorization["aura.chats"]
    );
    navigate(routes.client.chatsQuizParentStatus());
  };

  const handleValid = (birthdate: string) => {
    dispatch(actions.form.addDate(birthdate));
    setIsDisabled(birthdate === "");
  };

  return (
    <>
      <ZodiacWheel date={birthdate} />

      <h2 className={`chats-answers-title ${styles.title}`}>
        {translate("/quiz/date.title")}
      </h2>

      <DatePicker
        name="birthdate"
        value={birthdate}
        onValid={handleValid}
        onInvalid={() => setIsDisabled(true)}
        inputClassName={styles["date-picker-input"]}
      />

      <Button
        classNameContainer={styles.button}
        disabled={isDisabled}
        onClick={handleNext}
      >
        {translate("continue")}
      </Button>
    </>
  );
}

export default Date;
