import { useDispatch, useSelector } from "react-redux";
import EmailSubstrate from "../../components/EmailSubstrate";
import styles from "./styles.module.scss";
import { actions, selectors } from "@/store";
// import Title from "@/components/Title";
import PriceList from "@/components/pages/ABDesign/v1/components/PriceList";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import {
  ELocalesPlacement,
  getDefaultLocaleByLanguage,
  language,
} from "@/locales";
import { useEffect, useState } from "react";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
import Loader from "@/components/Loader";
import { useTranslations } from "@/hooks/translations";
// import { useMetricABFlags } from "@/services/metric/metricService";
import { getLongText } from "./abText";
import metricService, { EGoals, EMetrics, useMetricABFlags } from "@/services/metric/metricService";
import TrialChoiceV1 from "./v1";

function TrialChoice() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { products, isLoading, currency, getText } = usePaywall({
    placementKey: EPlacementKeys["aura.placement.compatibility.v2"],
    localesPlacement: ELocalesPlacement.CompatibilityV2,
  });

  const locale = getDefaultLocaleByLanguage(language);

  const { flags, ready } = useMetricABFlags();
  const trialChoicePageType = flags?.trialChoicePageType?.[0];
  // const trialChoicePageType = "v1";

  // const { flags } = useMetricABFlags();
  // const isLongText = flags?.text?.[0] === "on";

  const [isDisabled, setIsDisabled] = useState(true);

  const selectedPrice = useSelector(selectors.selectSelectedPrice);
  const email = useSelector(selectors.selectEmail);
  const homeConfig = useSelector(selectors.selectHome);

  const handlePriceItem = () => {
    metricService.reachGoal(EGoals.SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.KLAVIYO]);
    setIsDisabled(false);
  };

  const handleNext = () => {
    if (isDisabled) {
      return;
    }
    dispatch(
      actions.siteConfig.update({
        home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false },
      })
    );
    navigate(routes.client.compatibilityV2TrialPayment());
  };

  useEffect(() => {
    metricService.reachGoal(EGoals.TRIAL_CHOICE_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [EMetrics.KLAVIYO]);
  }, []);

  if (!ready) {
    return (
      <div className={styles.container}>
        <Loader className={styles.loader} />
      </div>
    );
  }

  if (trialChoicePageType === "v1") {
    return <TrialChoiceV1 />;
  }

  return (
    <div className={styles.container}>
      {!isLoading && (
        <>
          <EmailSubstrate className={styles["email-substrate"]} email={email} />
          {/* {!isLongText && (
            <Title className={styles.title} variant="h2">
              {getText("text.0")}
            </Title>
          )} */}
          <p className={styles.text}>{getLongText(locale)}</p>

          <div className={styles["price-container"]}>
            <PriceList
              products={products}
              activeItem={selectedPrice}
              classNameItem={styles["price-item"]}
              classNameItemActive={`${styles["price-item-active"]}`}
              classNamePricesContainer={styles["prices-container"]}
              currency={currency}
              click={handlePriceItem}
            />
            <p className={styles["auxiliary-text"]}>{getText("text.1")}</p>
          </div>

          <Button
            className={styles.button}
            disabled={isDisabled}
            onClick={handleNext}
          >
            {translate("next")}
          </Button>
        </>
      )}
      {isLoading && <Loader className={styles.loader} />}
    </div>
  );
}

export default TrialChoice;