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

function BirthtimePage(): JSX.Element {
  const { translate } = useTranslations();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const birthtime = useSelector(selectors.selectBirthtime);
  let nextRoute = routes.client.createProfile();
  if (window.location.href.includes("/advisor-chat/")) {
    nextRoute = routes.client.advisorChatBirthPlace();
  }
  const handleNext = () => navigate(nextRoute);
  const handleChange = (value: string) => dispatch(actions.form.addTime(value));
  return (
    <section className="page">
      <Title variant="h2" className="mt-24">
        {translate("born_time_question")}
      </Title>
      <p className="description">{translate("nasa_data_using")}</p>
      <TimePicker value={birthtime} onChange={handleChange} />
      <MainButton onClick={handleNext}>{translate("next")}</MainButton>
    </section>
  );
}

export default BirthtimePage;
