import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { DatePicker } from "../DateTimePicker";
import MainButton from "../MainButton";
import Policy from "../Policy";
import Purposes from "../Purposes";
import Title from "../Title";
import routes from "@/routes";
import "./styles.css";

function BirthdayPage(): JSX.Element {
  const { translate } = useTranslations();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const birthdate = useSelector(selectors.selectBirthdate);
  const [isDisabled, setIsDisabled] = useState(true);
  let nextRoute = routes.client.didYouKnow();
  if (window.location.href.includes("/epe/")) {
    nextRoute = routes.client.epeEmail();
  }
  if (window.location.href.includes("/advisor-chat/")) {
    nextRoute = routes.client.advisorChatBirthtime();
  }
  const handleNext = () => navigate(nextRoute);
  const handleValid = (birthdate: string) => {
    dispatch(actions.form.addDate(birthdate));
    setIsDisabled(birthdate === "");
  };

  return (
    <section className="page">
      <Title variant="h3" className="mt-24">
        {translate("lets_start")}
      </Title>
      <Title variant="h2">{translate("date_of_birth")}</Title>
      <DatePicker
        name="birthdate"
        value={birthdate}
        onValid={handleValid}
        onInvalid={() => setIsDisabled(true)}
        inputClassName="date-picker-input"
      />
      <MainButton onClick={handleNext} disabled={isDisabled}>
        {translate("next")}
      </MainButton>
      <footer className="footer">
        <Policy>
          {translate("privacy_text", {
            eulaLink: (
              <a
                href="https://aura.wit.life/terms"
                target="_blank"
                rel="noopener noreferrer"
              >
                {translate("eula")}
              </a>
            ),
            privacyLink: (
              <a
                href="https://aura.wit.life/privacy"
                target="_blank"
                rel="noopener noreferrer"
              >
                {translate("privacy_notice")}
              </a>
            ),
            clickHere: (
              <a
                href="https://aura.wit.life/"
                target="_blank"
                rel="noopener noreferrer"
              >
                {translate("here")}
              </a>
            ),
          })}
        </Policy>
        <Purposes />
      </footer>
    </section>
  );
}

export default BirthdayPage;