'use strict';

const index = require('./index-8277cbb3.js');
const JSS = require('./JSS-8503a151.js');
const mixins = require('./mixins-4761d472.js');

const vanillaStyle = `
  :host{
    display: block;   
    width: 100%;
  }
`;
const textAlignStyle = {
  right: `
sl-input::part(input){
  text-align: right;
}`,
  center: `  
sl-input::part(input){
  text-align: center;
}`,
  left: ``,
};
const disabledStyles = `
  sl-input::part(input){
    cursor: default;
  }
`;
function CopyTextView(props) {
  const { buttonStyle = "icon" } = props;
  const style = {
    HostBlock: mixins.HostBlock,
    inputStyle: {
      "&::part(input)": {
        textOverflow: "ellipsis",
        width: "100%",
        color: props.textColor || "var(--sl-input-color)",
      },
      "&::part(base)": {
        "--sl-input-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
        "--sl-input-border-color": "var(--sqm-border-color)",
        "--sl-input-border-color-hover": "#999999",
        "--sl-input-border-color-focus": "#999999",
        "--sl-input-color-hover": "var(--sqm-input-color-hover)",
        "--sl-input-color-focus": "var(--sqm-input-color-focus)",
        "--sl-input-color-disabled": "var(--sqm-input-disabled-color)",
        "--sl-input-background-color-focus": "var(--sqm-input-background)",
        "--sl-input-background-color-hover": "var(--sqm-input-background)",
        cursor: "pointer",
        overflow: "visible",
        borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
        background: props.backgroundColor || "var(--sqm-input-background)",
        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-input-border-color)"}`,
      },
      width: "100%",
    },
    icon: {
      "&::part(base)": {
        color: props.textColor || "var(--sqm-text)",
      },
    },
    inputErrorStyle: {},
    ContainerDiv: {
      display: "flex",
      alignItems: "flex-start",
      flexDirection: "column",
      justifyContent: "center",
      gap: "var(--sl-spacing-x-small)",
      width: "100%",
    },
    containerStyle: {
      display: "flex",
      alignItems: "center",
      gap: "var(--sl-spacing-x-small)",
      width: "100%",
    },
    errorTextStyle: {
      margin: "0",
      color: "var(--sqm-danger-color-text)",
    },
    notificationTextStyle: {
      margin: "0",
      color: "inherit",
    },
  };
  const sheet = JSS.createStyleSheet(style);
  const styleString = sheet.toString();
  const error = !props.loading && props.error;
  const inputText = error ? props.inputPlaceholderText : props.copyString;
  const disabled = error || props.loading || props.disabled;
  const tooltipPlacement = props.buttonStyle === "button-below"
    ? "bottom"
    : props.buttonStyle === "button-outside"
      ? "top"
      : "top-end";
  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { exportparts: `base: ${props.buttonType || "primary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
  return (index.h("div", { class: sheet.classes.ContainerDiv },
    index.h("style", { type: "text/css" },
      styleString,
      vanillaStyle,
      textAlignStyle[props.textAlign],
      disabled && disabledStyles),
    index.h("div", { class: sheet.classes.containerStyle, style: {
        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
      } },
      index.h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
        buttonStyle === "icon" && copyButton,
        error && (index.h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
        copyButton),
    props.isCopied &&
      props.showNotificationText &&
      props.notificationText && (index.h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
}

exports.CopyTextView = CopyTextView;
