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

function DateEvent() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
  const { updateSession } = useSession();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { dateEvent: dateEventFromStore, relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers);
  const isSingle = relationshipStatus === "single";
  const translateSeparator = isSingle ? "single" : "relationship";

  const [dateEvent, setDateEvent] = useState(dateEventFromStore);
  const [isDisabled, setIsDisabled] = useState(true);

  const handleValid = (_birthdate: string) => {
    setDateEvent(_birthdate);
    setIsDisabled(_birthdate === "");
  };

  const handleNext = () => {
    dispatch(actions.compatibilityV4Answers.update({ dateEvent }));
    navigate(
      isSingle
        ? routes.client.compatibilityV4HeadOrHeart()
        : routes.client.compatibilityV4PartnerAnalysis()
    );
    updateSession(
      {
        answers: {
          date_event: `${dateEvent} 00:00`,
        }
      },
      ESourceAuthorization["aura.compatibility.v4"]
    );
  };

  return (
    <div className={styles["page-container"]}>
      <Title variant="h2" className={styles.title}>
        {translate(`/date-event.${translateSeparator}.title`)}
      </Title>
      <p className={styles.description}>{translate(`/date-event.${translateSeparator}.text`)}</p>
      <DatePicker
        name="dateEvent"
        value={dateEvent}
        onValid={handleValid}
        onInvalid={() => setIsDisabled(true)}
        inputClassName="date-picker-input"
        differenceOfMaximumAndCurrentYear={0}
      />
      <Button
        className={styles.button}
        onClick={handleNext}
        disabled={isDisabled}
      >
        {translate("next")}
      </Button>
    </div>
  );
}

export default DateEvent;
