import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectors, actions } from "@/store";
import { useDispatch } from "react-redux";
import { useEffect, useState } from "react";
import BirthplaceInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/BirthplaceInput";

function PotentialPartnerName() {
    const dispatch = useDispatch();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const { potentialPartnerName } = useSelector(selectors.selectCompatibilityV4Answers);
    const [isValidPotentialPartnerName, setIsValidPotentialPartnerName] = useState(false);
    const navigate = useNavigate();

    useEffect(() => {
        if (potentialPartnerName) {
            setIsValidPotentialPartnerName(true);
        }
    }, [potentialPartnerName])

    const handleValidPotentialPartnerName = (potentialPartnerName: string) => {
        if (potentialPartnerName) {
            dispatch(
                actions.compatibilityV4Answers.update({
                    potentialPartnerName,
                })
            );
        }
        setIsValidPotentialPartnerName(true);
    };

    const handleClick = () => {
        navigate(routes.client.compatibilityV4PotentialPartnerBirthdate());
    }

    return (
        <div className={styles.container}>
            <Title variant="h2" className={styles.title}>
                {translate("/potential-partner-name.title")}
            </Title>
            <p className={styles.text}>
                {translate("/potential-partner-name.text")}
            </p>
            <BirthplaceInput
                value={potentialPartnerName}
                placeholder={translate("/potential-partner-name.placeholder")}
                inputClassName={styles.input}
                placeholderClassName={styles.placeholder}
                onValid={handleValidPotentialPartnerName}
                onInvalid={() => setIsValidPotentialPartnerName(false)}
            />
            <Button
                className={styles.button}
                disabled={!isValidPotentialPartnerName}
                onClick={handleClick}
            >
                {translate("next")}
            </Button>
        </div>
    )
}

export default PotentialPartnerName