import Title from "@/components/Title";
import styles from "./styles.module.css";
import PlacePicker from "@/components/PlacePicker";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import MainButton from "@/components/MainButton";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

function BirthPlacePage() {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { birthPlace } = useSelector(selectors.selectQuestionnaire);

  const handleChange = (birthPlace: string) => {
    return dispatch(actions.questionnaire.update({ birthPlace }));
  };

  const handleNext = () => {
    navigate(routes.client.singlePaymentShortPath("chat.aura"));
  };

  return (
    <section className={`${styles.page} page`}>
      <Title variant="h1" className={styles.title}>
        Where were you born?
      </Title>
      <p className={styles.description}>
        Please select the city where you were born.
      </p>
      <PlacePicker
        value={birthPlace}
        name="birthPlace"
        maxLength={1000}
        onChange={handleChange}
      />
      {!!birthPlace.length && (
        <MainButton className={styles.button} onClick={handleNext}>
          {t("next")}
        </MainButton>
      )}
    </section>
  );
}

export default BirthPlacePage;