import { h } from "@stencil/core";
import { intl } from "../../global/global";
import { createStyleSheet } from "../../styling/JSS";
import { CopyTextView } from "../views/copy-text-view";
const vanillaStyle = `
  :host {
    display: block;
    width: 100%;
  }
`;
export function ShareLinkView(props) {
  const { copyTextViewProps, allowCustomization, customizeLinkLabel, saveLabelText, savingLabelText, cancelLabelText, editLabelText, charactersRemainingText, validatingLabelText, isEditing, editValue, domainPrefix, editsRemaining, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, minCharactersText, } = props;
  const style = {
    Container: {
      display: "flex",
      flexDirection: "column",
      gap: "var(--sl-spacing-xx-small)",
      width: "100%",
    },
    CustomizeLinkText: {
      paddingTop: "var(--sl-spacing-xx-small)",
      margin: "0",
      fontSize: "var(--sl-font-size-small)",
      fontWeight: "600",
      cursor: "pointer",
      color: "var(--sl-color-neutral-900)",
      textAlign: "left",
      "&:hover": {
        textDecoration: "underline",
      },
    },
    CustomizeLinkDisabled: {
      paddingTop: "var(--sl-spacing-xx-small)",
      margin: "0",
      fontSize: "var(--sl-font-size-small)",
      fontWeight: "600",
      color: "var(--sl-color-neutral-400)",
      cursor: "default",
      textAlign: "left",
    },
    EditContainer: {
      display: "flex",
      flexDirection: "column",
      gap: "var(--sl-spacing-x-small)",
      width: "100%",
    },
    EditInputWrapper: {
      display: "flex",
      alignItems: "center",
      width: "100%",
      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-input-border-color, #d1d5db)",
      borderRadius: "var(--sqm-border-radius-normal, 4px)",
      background: "var(--sqm-input-background, #fff)",
      overflow: "hidden",
      "&:focus-within": {
        borderColor: "#999999",
        boxShadow: "0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color)",
      },
    },
    DomainPrefix: {
      padding: "0 0 0 var(--sl-spacing-medium)",
      fontSize: "var(--sl-font-size-medium)",
      color: "var(--sl-color-neutral-500)",
      whiteSpace: "nowrap",
      userSelect: "none",
      lineHeight: "var(--sl-input-height-medium)",
    },
    EditInput: {
      "&::part(base)": {
        border: "none",
        borderRadius: "0",
      },
      "&::part(input)": {
        margin: 0,
      },
    },
    EditLabel: {
      margin: "0",
      fontSize: "var(--sl-font-size-small)",
      color: "var(--sl-color-neutral-500)",
    },
    HelperText: {
      paddingTop: "var(--sl-spacing-xx-small)",
      margin: "0",
      fontSize: "var(--sl-font-size-small)",
      color: "var(--sl-color-neutral-500)",
    },
    ErrorText: {
      margin: "0",
      fontSize: "var(--sl-font-size-small)",
      color: "var(--sqm-danger-color-text, #dc2626)",
    },
    ActionRow: {
      display: "flex",
      gap: "var(--sl-spacing-medium)",
      alignItems: "center",
    },
    SaveButton: {
      cursor: "pointer",
      fontFamily: "var(--sl-font-sans)",
      fontSize: "var(--sl-font-size-small)",
      fontWeight: "600",
      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
      borderRadius: "var(--sqm-border-radius-normal, 4px)",
      border: "1px solid var(--sl-color-neutral-900)",
      background: "var(--sl-color-neutral-900)",
      color: "#fff",
      "&:disabled": {
        opacity: "0.5",
        cursor: "default",
      },
    },
    CancelButton: {
      margin: "0",
      fontSize: "var(--sl-font-size-small)",
      fontWeight: "600",
      cursor: "pointer",
      background: "none",
      border: "none",
      fontFamily: "var(--sl-font-sans)",
      color: "var(--sl-color-neutral-500)",
      "&::part(label)": {
        padding: "0",
      },
    },
    LimitReachedContainer: {
      display: "flex",
      alignItems: "center",
      gap: "var(--sl-spacing-x-small)",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "EXISTING_CODE_CONFLICT" ? "info" : "warning";
  const showCharactersRemaining = charactersRemaining <= 14;
  const editLimitMessage = intl.formatMessage({
    id: "editLimitText",
    defaultMessage: editLimitText,
  }, { editsRemaining });
  // Editing state
  if (isEditing) {
    return (h("div", { class: sheet.classes.Container },
      h("style", { type: "text/css" },
        styleString,
        vanillaStyle),
      h("p", { class: sheet.classes.EditLabel }, editLabelText),
      h("div", { class: sheet.classes.EditInputWrapper },
        h("span", { class: sheet.classes.DomainPrefix }, domainPrefix),
        h("sl-input", { class: sheet.classes.EditInput, type: "text", value: editValue, onInput: (e) => onEditValueChange(e.target.value), onKeyDown: (e) => {
            if (e.key === "/" || e.key === "@")
              e.preventDefault();
          }, disabled: isSaving, maxLength: characterLimit })),
      h("p", { class: sheet.classes.HelperText },
        editLimitMessage,
        " ",
        charactersRemaining > 12 && minCharactersText,
        showCharactersRemaining &&
          ` ${intl.formatMessage({
            id: "charactersRemainingText",
            defaultMessage: charactersRemainingText,
          }, { charactersRemaining })}`),
      validationError && (h("sqm-form-message", { type: errorMessageType, style: { paddingBottom: "var(--sl-spacing-xx-small)" } },
        h("p", { part: "alert-title" }, validationError.title),
        validationError.description)),
      isValidating && (h("p", { class: sheet.classes.HelperText }, validatingLabelText)),
      h("div", { class: sheet.classes.ActionRow },
        h("button", { class: sheet.classes.SaveButton, onClick: onSave, disabled: isSaving ||
            isValidating ||
            !!validationError ||
            !editValue ||
            editValue.length < minCharacters }, isSaving ? savingLabelText : saveLabelText),
        h("sl-button", { type: "text", class: sheet.classes.CancelButton, onClick: onCancel, disabled: isSaving }, cancelLabelText))));
  }
  // Default / Customized / Limit reached states
  return (h("div", { class: sheet.classes.Container },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h(CopyTextView, Object.assign({}, copyTextViewProps)),
    allowCustomization &&
      (customizeDisabled ? (h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
        h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (h("div", { class: sheet.classes.LimitReachedContainer },
        h("p", { class: limitReached
            ? sheet.classes.CustomizeLinkDisabled
            : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel),
        allowCustomization && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
          id: "editLimitReached",
          defaultMessage: editLimitReachedText,
        }, {
          supportLink: (h("a", { target: "_blank", href: "https://help.impact.com/other/readme/get-help-and-support" }, supportLinkText)),
        }))))))));
}
