import styles from "./styles.module.css";
import { TimePicker } from "@/components/DateTimePicker";
import routes from "@/routes";
import { actions, selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import ButtonBack from "../../components/ButtonBack";
import { Message } from "../../components/Message";
import { useStyle } from "@/routerComponents/Mike/v1/providers/StyleProvider/useStyle";
import { useEffect } from "react";
import { useGenderInfo } from "../../lib/getGenderInfo";
import { Card } from "../../ui/Card";
import { Button } from "../../ui/Button";
import Link from "../../components/Link";

function BirthTimePage() {
  const { translate } = useTranslations();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const birthtime = useSelector(selectors.selectBirthtime);
  const { setStyle } = useStyle();
  const genderInfo = useGenderInfo();

  let nextRoute = routes.client.mikeV1() + routes.client.getBirthPlace();
  if (window.location.href.includes("/advisor-chat/")) {
    nextRoute = routes.client.advisorChatBirthPlace();
  }
  const handleNext = () => navigate(nextRoute);
  const handleChange = (value: string) => dispatch(actions.form.addTime(value));

  useEffect(() => {
    setStyle({
      backgroundImage: "url(/bg-gradient.png)",
      backgroundPosition: "left bottom",
      backgroundRepeat: "no-repeat",
    });
  }, [setStyle]);
  return (
    <>
      <ButtonBack theme="light" />
      <div className="page-mike">
        <div className={styles.assistant}>
          <figure className={styles["assistant-img"]}>
            <img src="/mike/assistant_2.webp" />
          </figure>
          <Message className={styles["assistant-message"]}>
            {translate("mike.birthtime.message")}
          </Message>
        </div>
        <Card className={styles.card}>
          <p className="description">{translate("mike.birthtime.description")}</p>
          <TimePicker value={birthtime} onChange={handleChange} />
          <Button
            onClick={handleNext}
            style={{ background: genderInfo?.colorAssociation }}
            className={styles.button}
          >
            {translate("next")}
          </Button>
        </Card>
        <Link to={nextRoute}>Skip this step and continue further</Link>
      </div>
    </>
  );
}

export default BirthTimePage;
