import { FormField, Input } from "@wix/design-system";
import React, { useEffect, useState } from "react";
import { useBiNext } from "./../../bi-context-provider/bi-context-provider.js";
import { LINK_MODAL_ID } from "../constants.js";
import { URL_INPUT } from "../data-hooks/data-hooks.js";
const WebAddress = ({
  autoFocus,
  link,
  onChangeUrl,
  onValidateUrl,
  submitError,
  t
}) => {
  const logBi = useBiNext({ pluginId: "link", modalId: LINK_MODAL_ID });
  const [validateTimeout, setValidateTimeout] = useState(void 0);
  const onBlur = (evt) => {
    onValidateUrl(evt.target.value);
  };
  const onChange = (value) => {
    onChangeUrl(value);
    setValidateTimeout((validateTimeout2) => {
      clearTimeout(validateTimeout2);
      return setTimeout(() => onValidateUrl(value), 2e3);
    });
  };
  useEffect(() => () => clearTimeout(validateTimeout), [validateTimeout]);
  const invalidUrl = submitError === "invalid-url";
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    FormField,
    {
      label: t("LinkSettings_WebAddress_Label"),
      labelPlacement: "top",
      status: invalidUrl ? "error" : void 0,
      statusMessage: invalidUrl ? t("LinkSettings_WebAddress_InvalidLink") : void 0
    },
    /* @__PURE__ */ React.createElement(
      Input,
      {
        autoFocus,
        dataHook: URL_INPUT,
        onBlur,
        onChange: (evt) => {
          logBi({ dataHook: URL_INPUT, value: evt.target.value });
          onChange(evt.target.value);
        },
        placeholder: t("LinkSettings_WebAddress_Placeholder"),
        size: "small",
        value: link.url
      }
    )
  ));
};
export {
  WebAddress
};
//# sourceMappingURL=web-address.js.map
