import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { memo, useState, useMemo, useEffect, createElement } from 'react';
import { isPresent, hyphenate, noop, filterBy, removeBy } from '@bigbinary/neeto-cist';
import Down from '@bigbinary/neeto-icons/Down';
import Up from '@bigbinary/neeto-icons/Up';
import Button from '@bigbinary/neetoui/Button';
import Spinner from '@bigbinary/neetoui/Spinner';
import { pipe, prop, isNil, pluck, not } from 'ramda';
import { useTranslation } from 'react-i18next';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import Typography from '@bigbinary/neetoui/Typography';
import HelpPopover from './HelpPopover.js';
import classnames from 'classnames';
import Tooltip from '@bigbinary/neetoui/Tooltip';
import CopyToClipboardButton from './CopyToClipboardButton.js';
import TimeFormat from './TimeFormat.js';
import Computer from '@bigbinary/neeto-icons/Computer';
import Email from '@bigbinary/neeto-icons/Email';
import Location from '@bigbinary/neeto-icons/Location';
import Mobile from '@bigbinary/neeto-icons/Mobile';
import Phone from '@bigbinary/neeto-icons/Phone';
import Subdomain from '@bigbinary/neeto-icons/Subdomain';
import User from '@bigbinary/neeto-icons/User';
import Apple from '@bigbinary/neeto-icons/misc/Apple';
import Chrome from '@bigbinary/neeto-icons/misc/Chrome';
import Edge from '@bigbinary/neeto-icons/misc/Edge';
import Firefox from '@bigbinary/neeto-icons/misc/Firefox';
import Safari from '@bigbinary/neeto-icons/misc/Safari';
import Ubuntu from '@bigbinary/neeto-icons/misc/Ubuntu';
import Windows from '@bigbinary/neeto-icons/misc/Windows';
import useHotkeys from '@bigbinary/neeto-hotkeys';
import Check from '@bigbinary/neeto-icons/Check';
import Close from '@bigbinary/neeto-icons/Close';
import Input from '@bigbinary/neetoui/Input';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'formik';
import { P as PhoneNumberInput } from './phone-number-HpVGHffA.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import '@bigbinary/neeto-commons-frontend/utils/general';
import '@bigbinary/neeto-icons/Copy';
import '@babel/runtime/helpers/asyncToGenerator';
import 'i18next';
import 'libphonenumber-js/min';
import '@bigbinary/neeto-commons-frontend/utils';
import 'yup';
import 'axios';
import { n } from './inject-css-C2dztUxs.js';
import '@bigbinary/neeto-icons/Help';
import '@bigbinary/neetoui/Popover';
import './DateFormat.js';
import '@bigbinary/neeto-commons-frontend/react-utils/useTimer';
import '@bigbinary/neeto-commons-frontend/utils/datetime';
import '@tanstack/react-query';
import '@bigbinary/neetoui/Select';
import './_commonjsHelpers-BFTU3MAI.js';

var BOOLEAN_VALUES_MAP = {
  "true": "Yes",
  "false": "No"
};
var ENTER = "enter";
var ESCAPE = "escape";
var PHONE_NUMBER = "phone_number";
var INTEGER = "integer";
var ICONS_MAP = {
  name: User,
  user: User,
  email: Email,
  phone_number: Phone,
  location: Location,
  timezone: Subdomain,
  chrome: Chrome,
  safari: Safari,
  firefox: Firefox,
  edge: Edge,
  ie: Edge,
  windows: Windows,
  mac_os: Apple,
  linux: Ubuntu,
  mobile: Mobile,
  desktop: Computer
};

var getInputType = function getInputType(_ref) {
  var name = _ref.name,
    kind = _ref.kind;
  if (name === PHONE_NUMBER) return "tel";else if (kind === INTEGER) return "number";
  return "text";
};
var getIcon = function getIcon(_ref2) {
  var iconSize = _ref2.iconSize,
    name = _ref2.name,
    value = _ref2.value;
  var Icon = name === "browser" || name === "os" ? ICONS_MAP[value === null || value === void 0 ? void 0 : value.toLowerCase().replace(" ", "_")] : ICONS_MAP[name];
  return isPresent(Icon) ? /*#__PURE__*/jsx(Icon, {
    size: iconSize
  }) : null;
};
var isValuePresent = pipe(prop("value"), isPresent);
var mergeRefs = function mergeRefs() {
  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
    refs[_key] = arguments[_key];
  }
  return function (node) {
    return refs.filter(Boolean).forEach(function (ref) {
      return typeof ref === "function" ? ref(node) : ref.current = node;
    });
  };
};

var EditField = function EditField(_ref) {
  var name = _ref.name,
    error = _ref.error,
    label = _ref.label,
    kind = _ref.kind,
    value = _ref.value,
    handleChange = _ref.handleChange,
    handleMetadataCancel = _ref.handleMetadataCancel,
    handleMetadataSubmit = _ref.handleMetadataSubmit;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var enterRef = useHotkeys(ENTER, handleMetadataSubmit, {
    mode: "scoped"
  });
  var cancelRef = useHotkeys(ESCAPE, handleMetadataCancel, {
    mode: "scoped"
  });
  var InputComponent = name === PHONE_NUMBER ? PhoneNumberInput : Input;
  return /*#__PURE__*/jsxs("div", {
    className: "neeto-molecules-session-environment-editable-field relative flex min-w-0 flex-grow items-center",
    children: [/*#__PURE__*/jsx(InputComponent, {
      error: error,
      autoFocus: true,
      "data-testid": "metadata-input-".concat(hyphenate(name)),
      placeholder: t("neetoMolecules.common.enter", {
        what: label
      }),
      ref: mergeRefs(enterRef, cancelRef),
      type: getInputType({
        name: name,
        kind: kind
      }),
      value: value || "",
      onChange: handleChange
    }), /*#__PURE__*/jsxs("div", {
      className: "neeto-molecules-session-environment-editable-field__actions absolute end-0 top-0 flex h-8 items-center pe-1",
      children: [/*#__PURE__*/jsx(Button, {
        "data-testid": "metadata-cancel-".concat(hyphenate(name)),
        icon: Close,
        size: "small",
        style: "text",
        tooltipProps: {
          content: t("neetoMolecules.common.actions.cancel"),
          position: "top"
        },
        onClick: handleMetadataCancel
      }), /*#__PURE__*/jsx(Button, {
        "data-testid": "metadata-submit-".concat(hyphenate(name)),
        icon: Check,
        size: "small",
        style: "text",
        tooltipProps: {
          content: t("neetoMolecules.common.actions.save"),
          position: "top"
        },
        onClick: handleMetadataSubmit
      })]
    })]
  });
};
var EditField$1 = /*#__PURE__*/memo(EditField);

var Item = function Item(_ref) {
  var allowMultiline = _ref.allowMultiline,
    handleCancel = _ref.handleCancel,
    handleSubmit = _ref.handleSubmit,
    iconSize = _ref.iconSize,
    item = _ref.item,
    showIcons = _ref.showIcons;
  var _useState = useState(item.isEditing),
    _useState2 = _slicedToArray(_useState, 2),
    isEditing = _useState2[0],
    setIsEditing = _useState2[1];
  var _useState3 = useState(item.value),
    _useState4 = _slicedToArray(_useState3, 2),
    value = _useState4[0],
    setValue = _useState4[1];
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var icon = item.icon,
    _item$isEditable = item.isEditable,
    isEditable = _item$isEditable === void 0 ? false : _item$isEditable,
    _item$extraClasses = item.extraClasses,
    extraClasses = _item$extraClasses === void 0 ? "" : _item$extraClasses,
    _item$extraWrapperCla = item.extraWrapperClasses,
    extraWrapperClasses = _item$extraWrapperCla === void 0 ? "" : _item$extraWrapperCla,
    id = item.id,
    fieldValueId = item.fieldValueId,
    _item$custom = item.custom,
    custom = _item$custom === void 0 ? false : _item$custom,
    name = item.name,
    kind = item.kind,
    error = item.error,
    label = item.label,
    _item$showCopyButton = item.showCopyButton,
    showCopyButton = _item$showCopyButton === void 0 ? false : _item$showCopyButton;
  var valueToRender = useMemo(function () {
    if (isNil(value)) return "-";
    if (typeof value === "boolean") return BOOLEAN_VALUES_MAP[value.toString()];
    if (name === "email") return value.toLowerCase();
    return value;
  }, [value]);
  var iconToRender = useMemo(function () {
    return icon || getIcon({
      iconSize: iconSize,
      name: name,
      value: value
    });
  }, [icon, iconSize, name, value]);
  var onSuccess = function onSuccess() {
    return setIsEditing(false);
  };
  var handleMetadataSubmit = function handleMetadataSubmit() {
    return handleSubmit({
      fieldId: id,
      fieldValueId: fieldValueId,
      name: name,
      value: value,
      custom: custom,
      onSuccess: onSuccess
    });
  };
  var handleMetadataCancel = function handleMetadataCancel() {
    setIsEditing(false);
    setValue(item.value);
    handleCancel(name);
  };
  var handleChange = function handleChange(event) {
    var value = name === PHONE_NUMBER ? event : event.target.value;
    setValue(value);
  };
  useEffect(function () {
    setValue(item.value);
  }, [item]);
  var labelKey = hyphenate(name !== null && name !== void 0 ? name : label);
  return /*#__PURE__*/jsxs("div", {
    "data-testid": "metadata-".concat(labelKey, "-container"),
    className: classnames("mb-3 flex place-items-center gap-2 align-middle", extraWrapperClasses, {
      "flex-wrap": name !== PHONE_NUMBER && allowMultiline,
      "flex-nowrap": !allowMultiline
    }),
    children: [showIcons && isPresent(iconToRender) ? /*#__PURE__*/jsx(Tooltip, {
      content: label || t("neetoMolecules.sessionEnvironment.details.keys.".concat(name)),
      children: /*#__PURE__*/jsx("div", {
        className: "flex-shrink-0",
        children: iconToRender
      })
    }) : /*#__PURE__*/jsx(Typography, {
      className: "neeto-molecules-session-environment-editable-field neeto-ui-text-gray-600 whitespace-nowrap",
      "data-testid": "metadata-label-".concat(labelKey),
      style: "body2",
      children: label || t("neetoMolecules.sessionEnvironment.details.keys.".concat(name))
    }), !isEditing ? /*#__PURE__*/jsxs(Fragment, {
      children: [kind === "datetime" ? /*#__PURE__*/jsx(TimeFormat.DateWeekTime, {
        date: value,
        typographyProps: {
          style: "body2",
          weight: "medium",
          className: classnames("overflow-hidden truncate whitespace-normal break-all ".concat(extraClasses), {
            "whitespace-nowrap": !allowMultiline
          })
        }
      }) : /*#__PURE__*/jsx(Tooltip, {
        content: valueToRender,
        position: "top",
        children: /*#__PURE__*/jsx(Typography, {
          "data-testid": "metadata-value-".concat(labelKey),
          style: "body2",
          weight: "medium",
          className: classnames("overflow-hidden truncate whitespace-normal break-all ".concat(extraClasses), {
            "neeto-molecules-session-environment-editable-text cursor-pointer p-0.5": isEditable,
            "whitespace-nowrap": !allowMultiline
          }),
          onClick: function onClick() {
            return isEditable && setIsEditing(true);
          },
          children: valueToRender
        })
      }), showCopyButton && /*#__PURE__*/jsx(CopyToClipboardButton, {
        className: "flex-shrink-0",
        size: "small",
        style: "text",
        value: valueToRender
      })]
    }) : /*#__PURE__*/jsx(EditField$1, {
      error: error,
      handleChange: handleChange,
      handleMetadataCancel: handleMetadataCancel,
      handleMetadataSubmit: handleMetadataSubmit,
      kind: kind,
      label: label,
      name: name,
      value: value
    })]
  });
};

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DetailsBlock = function DetailsBlock(_ref) {
  var _ref$allowMultiline = _ref.allowMultiline,
    allowMultiline = _ref$allowMultiline === void 0 ? true : _ref$allowMultiline,
    details = _ref.details,
    _ref$handleCancel = _ref.handleCancel,
    handleCancel = _ref$handleCancel === void 0 ? noop : _ref$handleCancel,
    _ref$handleSubmit = _ref.handleSubmit,
    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
    helpPopoverProps = _ref.helpPopoverProps,
    iconSize = _ref.iconSize,
    _ref$showIcons = _ref.showIcons,
    showIcons = _ref$showIcons === void 0 ? false : _ref$showIcons,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title;
  return /*#__PURE__*/jsxs("div", {
    className: "mb-4",
    "data-testid": "details-block-items-parent",
    children: [title && /*#__PURE__*/jsxs("div", {
      className: "mb-2 flex items-center gap-2",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "neeto-ui-text-gray-700",
        style: "h5",
        textTransform: "uppercase",
        weight: "bold",
        children: title
      }), isPresent(helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread({}, helpPopoverProps))]
    }), details.filter(function (detail) {
      return detail.isEditable || isValuePresent(detail);
    }).map(function (detail, index) {
      return /*#__PURE__*/createElement(Item, {
        allowMultiline: allowMultiline,
        handleCancel: handleCancel,
        handleSubmit: handleSubmit,
        iconSize: iconSize,
        showIcons: showIcons,
        item: detail,
        key: index
      });
    })]
  });
};
var DetailsBlock$1 = /*#__PURE__*/memo(DetailsBlock);

var css = ".neeto-molecules-session-environment-editable-field>div:not([class]){align-items:center;display:flex;flex-grow:1}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .ant-picker-suffix{display:none}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-input__prefix{margin:0;padding:0}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-date-input,.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-input>input{padding-block:.25rem!important;padding-inline:.25rem 2.8125rem!important}.neeto-molecules-session-environment-editable-field__actions .neeto-ui-btn{background-color:transparent!important;min-height:0!important;padding:.125rem!important}.neeto-molecules-session-environment-editable-text{border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);transition:var(--neeto-ui-transition)}.neeto-molecules-session-environment-editable-text:hover{border:thin solid rgb(var(--neeto-ui-gray-400))}";
n(css,{});

var SessionEnvironment = function SessionEnvironment(_ref) {
  var _ref$allowMultiline = _ref.allowMultiline,
    allowMultiline = _ref$allowMultiline === void 0 ? false : _ref$allowMultiline,
    details = _ref.details,
    _ref$handleCancel = _ref.handleCancel,
    handleCancel = _ref$handleCancel === void 0 ? noop : _ref$handleCancel,
    _ref$handleSubmit = _ref.handleSubmit,
    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
    _ref$helpPopoverProps = _ref.helpPopoverProps,
    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
    _ref$iconSize = _ref.iconSize,
    iconSize = _ref$iconSize === void 0 ? 20 : _ref$iconSize,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    _ref$moreDetails = _ref.moreDetails,
    moreDetails = _ref$moreDetails === void 0 ? [] : _ref$moreDetails,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showViewMore = _useState2[0],
    setShowViewMore = _useState2[1];
  var customViewMoreItems = useMemo(function () {
    return filterBy({
      kind: "custom"
    }, moreDetails);
  }, [moreDetails]);
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  if (isLoading) {
    return /*#__PURE__*/jsx("div", {
      className: "flex h-full w-full items-center justify-center",
      children: /*#__PURE__*/jsx(Spinner, {})
    });
  }
  return /*#__PURE__*/jsxs("div", {
    className: "w-full",
    children: [/*#__PURE__*/jsx(DetailsBlock$1, {
      allowMultiline: allowMultiline,
      details: details,
      handleCancel: handleCancel,
      handleSubmit: handleSubmit,
      helpPopoverProps: helpPopoverProps,
      iconSize: iconSize,
      title: title,
      showIcons: true
    }), showViewMore && /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("hr", {
        className: "neeto-ui-border-gray-200 my-4"
      }), /*#__PURE__*/jsx(DetailsBlock$1, {
        handleCancel: handleCancel,
        handleSubmit: handleSubmit,
        helpPopoverProps: helpPopoverProps,
        iconSize: iconSize,
        details: removeBy({
          kind: "custom"
        }, moreDetails)
      }), isPresent(customViewMoreItems) && /*#__PURE__*/jsxs(Fragment, {
        children: [/*#__PURE__*/jsx("hr", {
          className: "neeto-ui-border-gray-200 my-4"
        }), pluck("value", customViewMoreItems)]
      })]
    }), /*#__PURE__*/jsx(Button, {
      className: "mb-4",
      "data-testid": "view-more-less-button",
      icon: showViewMore ? Up : Down,
      style: "link",
      label: showViewMore ? t("neetoMolecules.sessionEnvironment.viewLess") : t("neetoMolecules.sessionEnvironment.viewMore"),
      onClick: function onClick() {
        return setShowViewMore(not);
      }
    })]
  });
};
var index = /*#__PURE__*/memo(SessionEnvironment);

export { index as default };
//# sourceMappingURL=SessionEnvironment.js.map
