import { useTranslations } from "@/hooks/translations";
import MainButton from "../MainButton";
import Title from "../Title";
import styles from "./styles.module.css";
import { useCallback, useEffect, useRef, useState } from "react";
import NameInput from "./nameInput";
import DatePicker from "./DatePicker";
import { IDate, getDateAsString } from "@/services/date";
import { AICompatCategories, useApi, useApiCall } from "@/api";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { EPathsFromHome } from "@/store/siteConfig";
import {
  getCategoryIdByZodiacSign,
  getZodiacSignByDate,
} from "@/services/zodiac-sign";
import { Asset } from "@/api/resources/Assets";
import { getRandomArbitrary } from "@/services/random-value";
import Onboarding from "../Onboarding";
import TextWithFinger from "../TextWithFinger";
import { EDirectionOnboarding } from "@/types";

function CompatibilityPage(): JSX.Element {
  const { translate, i18n } = useTranslations();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const homeConfig = useSelector(selectors.selectHome);
  const showNavbarFooter = homeConfig.isShowNavbar;
  const birthdate = useSelector(selectors.selectBirthdate);
  const onboardingCompatibility = useSelector(
    selectors.selectOnboardingCompatibility
  ).isShown;

  const [isDisabled, setIsDisabled] = useState(true);
  const [isDisabledName, setIsDisabledName] = useState(true);
  const [isDisabledSelfName, setIsDisabledSelfName] = useState(true);
  isDisabledSelfName;
  const [isDisabledDate, setIsDisabledDate] = useState(true);
  const [isChangeDate, setIsChangeDate] = useState(false);
  const [currentOnboarding, setCurrentOnboarding] = useState(0);
  const [name, setName] = useState<string>("");
  const [selfName, setSelfName] = useState<string>("");
  const [selectedDate, setSelectedDate] = useState<string | IDate>("");
  const [compatCategory, setCompatCategory] = useState(1);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const [asset, setAsset] = useState<Asset>();
  const api = useApi();
  const inputSelfNameRef = useRef<HTMLInputElement>(null);
  const inputNameRef = useRef<HTMLInputElement>(null);
  const dateRef = useRef<HTMLInputElement>(null);
  const categoriesRef = useRef<HTMLInputElement>(null);
  const mainButtonRef = useRef<HTMLInputElement>(null);
  const locale = i18n.language;

  const assetsData = useCallback(async () => {
    const { asset_categories } = await api.getAssetCategories({ locale });
    const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
    const { assets } = await api.getAssets({
      category: String(categoryId || "1"),
    });
    return assets;
  }, [api, locale, zodiacSign]);

  const {
    data: assets,
    // isPending
  } = useApiCall<Asset[]>(assetsData);

  useEffect(() => {
    if (assets) {
      setAsset(assets[getRandomArbitrary(0, assets?.length || 0)]);
    }
  }, [assets]);

  const handleNext = () => {
    if (isDisabled) return;
    dispatch(
      actions.onboardingConfig.update({
        compatibility: {
          isShown: true,
        },
      })
    );
    dispatch(
      actions.compatibility.update({
        rightUser: {
          name,
          birthDate: selectedDate,
        },
        categoryId: compatCategory,
        selfName,
      })
    );
    dispatch(
      actions.compatibilities.update({
        name,
        birthDate: getDateAsString(selectedDate),
      })
    );

    navigate(routes.client.compatibilityResult());
  };

  const handleCross = () => {
    if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
      dispatch(
        actions.siteConfig.update({
          home: {
            pathFromHome: EPathsFromHome.compatibility,
            isShowNavbar: false,
          },
        })
      );
      return navigate(routes.client.breath());
    }
    if (homeConfig.pathFromHome === EPathsFromHome.breath) {
      dispatch(
        actions.siteConfig.update({
          home: {
            pathFromHome: EPathsFromHome.compatibility,
            isShowNavbar: true,
          },
        })
      );
      return navigate(routes.client.home());
    }
    return navigate(routes.client.home());
  };

  const loadData = useCallback(() => {
    return api
      .getAiCompatCategories({ locale })
      .then((resp: AICompatCategories.Response) => resp.compat_categories);
  }, [api, locale]);
  const { data } = useApiCall<AICompatCategories.CompatCategory[]>(loadData);

  const handleValidSelfName = (name: string) => {
    setIsDisabledSelfName(!name.length);
    setSelfName(name);
    checkAllDisabled();
  };

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

  const handleValidDate = (date: string | IDate) => {
    setIsDisabledDate(date === "");
    setIsChangeDate(date !== getDateAsString(new Date()));
    setSelectedDate(date);
    checkAllDisabled();
  };

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

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

  const scrollToElementOnboarding = (
    nextOnboarding: number,
    ref: HTMLElement | null
  ) => {
    setCurrentOnboarding(nextOnboarding);
    ref?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <section
      className={`${styles.page} page`}
      style={{
        paddingBottom: showNavbarFooter ? "48px" : "16px",
        backgroundImage: `url(${asset?.url.replace("http://", "https://")})`,
      }}
    >
      <div className={styles.blurring}></div>
      {!showNavbarFooter && (
        <div className={styles.cross} onClick={handleCross}></div>
      )}
      <div className={styles.content}>
        {onboardingCompatibility && (
          <Title variant="h2" className={styles.iam}>
            {translate("iAm")}
          </Title>
        )}
        {!onboardingCompatibility && (
          <div
            className={styles["input-container__name-container"]}
            style={{ zIndex: currentOnboarding === 0 ? 100 : 1 }}
            ref={inputSelfNameRef}
          >
            <NameInput
              name="selfName"
              value={selfName}
              placeholder={translate("au.name.my_name")}
              onKeyDown={(e) => {
                if (!selfName.length) return;
                if (e.key === "Enter") {
                  (e.target as HTMLInputElement).blur();
                }
              }}
              onValid={handleValidSelfName}
              onInvalid={() => setIsDisabledSelfName(true)}
              onBlur={() => {
                if (!selfName.length) return;
                setCurrentOnboarding(1);
                inputNameRef.current?.scrollIntoView({ behavior: "smooth" });
              }}
            />
          </div>
        )}
        <Title variant="h3" className={styles.plus}>
          +
        </Title>
        <div className={styles["inputs-container"]}>
          {!onboardingCompatibility && (
            <>
              {currentOnboarding === 0 && (
                <Onboarding
                  targetRef={inputSelfNameRef.current as HTMLDivElement}
                  isShow={currentOnboarding === 0}
                  direction={EDirectionOnboarding.BOTTOM}
                  showBackground={true}
                >
                  <TextWithFinger
                    text={translate("au.onboarding.my_name")}
                    direction={EDirectionOnboarding.BOTTOM}
                    crossClickHandler={() => {
                      if (!selfName.length) return;
                      scrollToElementOnboarding(1, inputNameRef.current);
                    }}
                  />
                </Onboarding>
              )}
              {currentOnboarding === 1 && (
                <Onboarding
                  targetRef={inputNameRef.current as HTMLDivElement}
                  isShow={currentOnboarding === 1}
                  direction={EDirectionOnboarding.BOTTOM}
                  showBackground={true}
                >
                  <TextWithFinger
                    text={translate("au.web_onbording.name")}
                    direction={EDirectionOnboarding.BOTTOM}
                    crossClickHandler={() => {
                      if (!name.length) return;
                      scrollToElementOnboarding(2, dateRef.current);
                    }}
                  />
                </Onboarding>
              )}
              {currentOnboarding === 2 && (
                <Onboarding
                  targetRef={dateRef.current as HTMLDivElement}
                  isShow={currentOnboarding === 2}
                  direction={EDirectionOnboarding.BOTTOM}
                  showBackground={true}
                >
                  <>
                    <button
                      className={styles["compatibility-onboarding__button"]}
                      disabled={!isChangeDate}
                      onClick={() => setCurrentOnboarding(3)}
                    >
                      Done
                    </button>
                    <TextWithFinger
                      text={translate("au.web_onbording.date")}
                      direction={EDirectionOnboarding.BOTTOM}
                      showCross={false}
                    />
                  </>
                </Onboarding>
              )}
              {currentOnboarding === 4 && (
                <Onboarding
                  targetRef={mainButtonRef.current as HTMLDivElement}
                  isShow={currentOnboarding === 4}
                  direction={EDirectionOnboarding.TOP}
                  showBackground={true}
                >
                  <TextWithFinger
                    text={""}
                    direction={EDirectionOnboarding.TOP}
                    showCross={false}
                  />
                </Onboarding>
              )}
            </>
          )}
          <div
            className={styles["input-container__name-container"]}
            style={{ zIndex: currentOnboarding === 1 ? 99 : 1 }}
            ref={inputNameRef}
          >
            <NameInput
              name="name"
              value={name}
              placeholder={translate("au.name.person")}
              onKeyDown={(e) => {
                if (!name.length) return;
                if (e.key === "Enter") {
                  (e.target as HTMLInputElement).blur();
                }
              }}
              onValid={handleValidName}
              onInvalid={() => setIsDisabledName(true)}
              onBlur={() => {
                if (!name.length) return;
                setCurrentOnboarding(2);
                dateRef.current?.scrollIntoView({ behavior: "smooth" });
              }}
            />
          </div>
          <div
            className={styles["input-container__date-container"]}
            style={{ zIndex: currentOnboarding === 2 ? 99 : 1 }}
            ref={dateRef}
          >
            <DatePicker onDateChange={handleValidDate} />
          </div>
        </div>
        {currentOnboarding === 3 && !onboardingCompatibility && (
          <Onboarding
            targetRef={categoriesRef.current as HTMLDivElement}
            isShow={currentOnboarding === 3}
            direction={EDirectionOnboarding.TOP}
            showBackground={true}
          >
            <TextWithFinger
              text={translate("au.web_onbording.category")}
              direction={EDirectionOnboarding.TOP}
              showCross={true}
              crossClickHandler={() => setCurrentOnboarding(4)}
            />
          </Onboarding>
        )}
        {data && data.length && (
          <div
            className={styles["compatibility-categories"]}
            style={{ zIndex: currentOnboarding === 3 ? 99 : 1 }}
            ref={categoriesRef}
          >
            {data.map((item, index) => (
              <div
                className="compatibility-categories__item"
                key={index}
                onClick={() => setCurrentOnboarding(4)}
              >
                <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>
        )}
        <div
          style={{
            position: "relative",
            zIndex: currentOnboarding === 4 ? 99 : 1,
          }}
          ref={mainButtonRef}
        >
          <MainButton
            className={styles["check-btn"]}
            onClick={handleNext}
            disabled={isDisabled}
          >
            {translate("check")}
          </MainButton>
        </div>
      </div>
    </section>
  );
}

export default CompatibilityPage;
