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 { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectors, actions } from "@/store";
import { useDispatch } from "react-redux";
import { TimePicker } from "@/components/DateTimePicker";
import { useState } from "react";
import CheckboxWithText from "@/components/CheckboxWithText";
import routes from "@/routes";

function Birthtime() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const { birthtime: birthtimeFromStore } = useSelector(selectors.selectCompatibilityV4Answers);
    
    const [birthtime, setBirthtime] = useState(birthtimeFromStore);

    const handleClick = () => {
        dispatch(actions.compatibilityV4Answers.update({ birthtime }));
        dispatch(actions.questionnaire.update({ birthtime }));
        navigate(routes.client.compatibilityV4YourAnalysis());
    }

    const handleChange = (_birthtime: string) => {
        setBirthtime(_birthtime);
    };

    const handleCheckboxChange = () => {
        console.log("checkbox changed");
    }
    

    return (
        <div className={styles.container}>
            <Title variant="h2" className={styles.title}>
                {translate("/birthtime.title")}
            </Title>
            <p className={styles.text}>
                {translate("/birthtime.text")}
            </p>
            <TimePicker value={birthtime} onChange={handleChange} />
            <Button
                className={styles.button}
                // disabled={isDisabled}
                onClick={handleClick}
            >
                {translate("next")}
            </Button>
            <CheckboxWithText
                className={styles.checkboxContainer}
                textClassName={styles.checkboxText}
                text={translate("/birthtime.checkbox")}
                onChange={handleCheckboxChange}
            />
        </div>
    )
}

export default Birthtime