import { useTranslation } from "react-i18next";
import MainButton from "../MainButton";
import Title from "../Title";
import styles from "./styles.module.css";
import { useCallback, useState } from "react";
import NameInput from "./nameInput";
import { DatePicker } from "../DateTimePicker";
import { IDate, getDateAsString } from "@/services/date";
import { AICompatCategories, useApi, useApiCall } from "@/api";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useDispatch } from "react-redux";
import { actions } from "@/store";

function CompatibilityPage(): JSX.Element {
  const { t, i18n } = useTranslation();
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [isDisabled, setIsDisabled] = useState(true);
  const [isDisabledName, setIsDisabledName] = useState(true);
  const [isDisabledDate, setIsDisabledDate] = useState(true);
  const [name, setName] = useState<string>('');
  const [date, setDate] = useState<string | IDate>('');
  const [compatCategory, setCompatCategory] = useState(1);

  const handleNext = () => {
    dispatch(actions.compatibility.update({
      rightUser: {
        name,
        birthDate: date
      },
      categoryId: compatCategory
    }))
    navigate(routes.client.compatibilityResult())
  };
  
  const api = useApi()
  const locale = i18n.language
  const loadData = useCallback(() => {
    return api.getAiCompatCategories({ locale })
      .then((resp: AICompatCategories.Response) => resp.compat_categories)
  }, [api, locale])
  const { data } = useApiCall<AICompatCategories.CompatCategory[]>(loadData)

  const handleValidName = (name: string) => {
    setIsDisabledName(!name.length);
    setName(name)
    checkAllDisabled()
  }

  const handleValidDate = (date: IDate | string) => {
    setIsDisabledDate(date === '');
    setDate(date)
    checkAllDisabled()
  }

  const checkAllDisabled = () => {
    setIsDisabled(isDisabledName || isDisabledDate);
  }

  const changeCompatCategory = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCompatCategory(parseInt(event.target.value))
  }
  

  return (
    <section className={`${styles.page} page`}>
      <Title variant="h1" className={styles.title}>
        {t("compatibility")}
      </Title>
      <div className={styles.content}>
        <Title variant="h2" className={styles.iam}>
          {t("iAm")}
        </Title>
        <Title variant="h3" className={styles.plus}>
          +
        </Title>
        <div className={styles['inputs-container']}>
          <div className={styles['input-container__name-container']}>
            <NameInput
              name="name"
              value={name}
              placeholder={t('name')}
              onValid={handleValidName}
              onInvalid={() => setIsDisabledName(true)}
            />
          </div>
          <div className={styles['input-container__date-container']}>
            <DatePicker
              name='birthdate'
              value={getDateAsString(date)}
              inputClassName={styles['date-input']}
              onValid={handleValidDate}
              onInvalid={() => setIsDisabledDate(true)}
            />
          </div>
        </div>
        {data && data.length && (
          <div className={styles['compatibility-categories']}>
            {
              data.map((item, index) => (
                <div className="compatibility-categories__item" key={index}>
                  <input className={`${styles["compatibility-categories__input"]} ${compatCategory === item.id ? styles["compatibility-categories__input--checked"] : ''}`}
                    type="radio"
                    name="compatCategory"
                    id={String(item.id)}
                    value={item.id}
                    checked={compatCategory === item.id}
                    onChange={changeCompatCategory} />
                  <label htmlFor={String(item.id)}>
                  {item.name}
                  </label>
                </div>
              ))
            }
          </div>
        )}
        <MainButton className={styles['check-btn']} onClick={handleNext} disabled={isDisabled}>
          {t("check")}
        </MainButton>
      </div>
    </section>
  );
}

export default CompatibilityPage;