import { useSelector } from "react-redux";
import { DatePicker } from "../DateTimePicker";
import Title from "../Title";
import styles from "./styles.module.css";
import { selectors } from "@/store";
import { useState } from "react";
import { useTranslations } from "@/hooks/translations";
import MainButton from "../MainButton";

interface IFullDataModalProps {
  onClose: (birthDate: string) => void;
}

function FullDataModal({ onClose }: IFullDataModalProps) {
  const { translate } = useTranslations();
  const birthDateFromStore = useSelector(selectors.selectBirthdate);
  const [birthDate, setBirthDate] = useState(birthDateFromStore);
  const [isDisabled, setIsDisabled] = useState(true);

  const handleValid = (_birthDate: string) => {
    setBirthDate(_birthDate);
    setIsDisabled(_birthDate === "");
  };

  return (
    <div className={styles.container}>
      <Title variant="h2">{translate("date_of_birth")}</Title>
      <DatePicker
        name="birthDate"
        value={birthDate}
        onValid={handleValid}
        onInvalid={() => setIsDisabled(true)}
        inputClassName="date-picker-input"
      />
      <MainButton disabled={isDisabled} onClick={() => onClose(birthDate)}>
        Save
      </MainButton>
    </div>
  );
}

export default FullDataModal;
