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

function QuestionnairePage() {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const selfBirthdate = useSelector(selectors.selectBirthdate);
  const genderInfo = useGenderInfo();

  const [birthdate, setBirthdate] = useState(selfBirthdate);

  const [isDisabled, setIsDisabled] = useState(true);
  const { setStyle } = useStyle();

  const handleValid = (_birthdate: string) => {
    dispatch(actions.form.addDate(_birthdate));
    setBirthdate(_birthdate);
    setIsDisabled(_birthdate === "");
  };

  const handleNext = () => {
    navigate(`${routes.client.mikeV1()}${routes.client.birthtime()}`);
  };

  useEffect(() => {
    if (genderInfo) {
      const styleBg = genderInfo
        ? {
            background: genderInfo.bgColor,
          }
        : undefined;
      setStyle(styleBg);
    }
  }, [genderInfo, setStyle]);
  return (
    <>
      <ButtonBack />
      <div className="page-mike">
        <div>
          <div className={styles["img-wrapper"]}>
            <img src="/mike/assistant_1.webp" />
          </div>
          <Message>{translate("mike.questionnaire.message")}</Message>
        </div>
        <Card>
          <Title variant="h4" className={styles.question}>
            What's your date of birth?
          </Title>
          <DatePicker
            name="birthdate"
            value={birthdate}
            onValid={handleValid}
            onInvalid={() => setIsDisabled(true)}
            inputClassName={`date-picker-input ${styles.input}`}
          />
          <Button
            className={styles.button}
            style={{ background: genderInfo?.colorAssociation }}
            onClick={handleNext}
            disabled={isDisabled}
          >
            {translate("next")}
          </Button>
        </Card>
      </div>
    </>
  );
}

export default QuestionnairePage;
