import React, { useMemo } from "react";
import FormToggleButton from "../../../components-form/src/components/FormToggleButton";
import { useTranslation } from "react-i18next";

const FsToggleButton = ({ id, label, renderAfterLabel, name, required, errors, register, market = "outdoor", language = "en", country = "CA" }) => {
  const { t } = useTranslation("components-formstack");
  const errorMsg = label.includes("Limited Warranty")
    ? t("Please agree to the conditions of the Arc'teryx Limited Warranty.")
    : t("This field is required.");

  const isRequired = useMemo(() => {
    if (name === 'marketing_emails') {
      return false;
    }
    else {
      return required;
    }
  }, [required, label]);

  const privacyPolicyLinks = {
    outdoor: `https://arcteryx.com/${country}/${language}/help/privacy`,
    sale: `https://outlet.arcteryx.com/${country}/${language}/help/privacy`,
    leaf: `https://leaf.arcteryx.com/${country}/${language}/help/privacy`,
  }

  const limitedWarrantyLinks = {
    outdoor: `https://arcteryx.com/${country}/${language}/help/limited-warranty`,
    sale: `https://outlet.arcteryx.com/${country}/${language}/help/limited-warranty`,
    leaf: `https://leaf.arcteryx.com/${country}/${language}/help/limited-warranty`,
  }

  const addFormLink = useMemo(() => {
    if (name === 'marketing_emails') {
      return {
        link: privacyPolicyLinks[market],
        label: t('Privacy Policy'),
      };
    }
    if (name === 'limited_warranty') {
      return {
        link: limitedWarrantyLinks[market],
        label: t(`Arc'teryx Limited Warranty`),
      };
    }
    else {
      return {
        link: '',
        label: ''
      };
    }
  }, [name]);

  return (
    <FormToggleButton
      id={id}
      required={isRequired}
      error={errors[name]}
      renderAfterLabel={renderAfterLabel}
      formLink={addFormLink}
      {...register(name, {
        required: isRequired && errorMsg,
      })}
    />
  );
};

export default FsToggleButton;