'use strict';

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var neetoCist = require('@bigbinary/neeto-cist');
var Down = require('@bigbinary/neeto-icons/Down');
var Up = require('@bigbinary/neeto-icons/Up');
var Button = require('@bigbinary/neetoui/Button');
var Spinner = require('@bigbinary/neetoui/Spinner');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Typography = require('@bigbinary/neetoui/Typography');
var HelpPopover = require('./HelpPopover.js');
var classnames = require('classnames');
var Tooltip = require('@bigbinary/neetoui/Tooltip');
var CopyToClipboardButton = require('./CopyToClipboardButton.js');
var TimeFormat = require('./TimeFormat.js');
var Computer = require('@bigbinary/neeto-icons/Computer');
var Email = require('@bigbinary/neeto-icons/Email');
var Location = require('@bigbinary/neeto-icons/Location');
var Mobile = require('@bigbinary/neeto-icons/Mobile');
var Phone = require('@bigbinary/neeto-icons/Phone');
var Subdomain = require('@bigbinary/neeto-icons/Subdomain');
var User = require('@bigbinary/neeto-icons/User');
var Apple = require('@bigbinary/neeto-icons/misc/Apple');
var Chrome = require('@bigbinary/neeto-icons/misc/Chrome');
var Edge = require('@bigbinary/neeto-icons/misc/Edge');
var Firefox = require('@bigbinary/neeto-icons/misc/Firefox');
var Safari = require('@bigbinary/neeto-icons/misc/Safari');
var Ubuntu = require('@bigbinary/neeto-icons/misc/Ubuntu');
var Windows = require('@bigbinary/neeto-icons/misc/Windows');
var useHotkeys = require('@bigbinary/neeto-hotkeys');
var Check = require('@bigbinary/neeto-icons/Check');
var Close = require('@bigbinary/neeto-icons/Close');
var Input = require('@bigbinary/neetoui/Input');
require('@babel/runtime/helpers/objectWithoutProperties');
require('formik');
var phoneNumber = require('./phone-number-CkAhqr7l.js');
var jsxRuntime = require('react/jsx-runtime');
require('@bigbinary/neeto-commons-frontend/utils/general');
require('@bigbinary/neeto-icons/Copy');
require('@babel/runtime/helpers/asyncToGenerator');
require('i18next');
require('libphonenumber-js/min');
require('@bigbinary/neeto-commons-frontend/utils');
require('yup');
require('axios');
var injectCss = require('./inject-css-B6qYtOJe.js');
require('@bigbinary/neeto-icons/Help');
require('@bigbinary/neetoui/Popover');
require('./DateFormat.js');
require('@bigbinary/neeto-commons-frontend/react-utils/useTimer');
require('@bigbinary/neeto-commons-frontend/utils/datetime');
require('@tanstack/react-query');
require('@bigbinary/neetoui/Select');
require('./_commonjsHelpers-BJu3ubxk.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 neetoCist.isPresent(Icon) ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
    size: iconSize
  }) : null;
};
var isValuePresent = ramda.pipe(ramda.prop("value"), neetoCist.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 = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var enterRef = useHotkeys(ENTER, handleMetadataSubmit, {
    mode: "scoped"
  });
  var cancelRef = useHotkeys(ESCAPE, handleMetadataCancel, {
    mode: "scoped"
  });
  var InputComponent = name === PHONE_NUMBER ? phoneNumber.PhoneNumberInput : Input;
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "neeto-molecules-session-environment-editable-field relative flex min-w-0 flex-grow items-center",
    children: [/*#__PURE__*/jsxRuntime.jsx(InputComponent, {
      error: error,
      autoFocus: true,
      "data-cy": "metadata-input-".concat(neetoCist.hyphenate(name)),
      "data-testid": "metadata-input-".concat(neetoCist.hyphenate(name)),
      placeholder: t("neetoMolecules.common.enter", {
        what: label
      }),
      ref: mergeRefs(enterRef, cancelRef),
      type: getInputType({
        name: name,
        kind: kind
      }),
      value: value || "",
      onChange: handleChange
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "neeto-molecules-session-environment-editable-field__actions absolute end-0 top-0 flex h-8 items-center pe-1",
      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
        "data-cy": "metadata-cancel-".concat(neetoCist.hyphenate(name)),
        "data-testid": "metadata-cancel-".concat(neetoCist.hyphenate(name)),
        icon: Close,
        size: "small",
        style: "text",
        tooltipProps: {
          content: t("neetoMolecules.common.actions.cancel"),
          position: "top"
        },
        onClick: handleMetadataCancel
      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
        "data-cy": "metadata-submit-".concat(neetoCist.hyphenate(name)),
        "data-testid": "metadata-submit-".concat(neetoCist.hyphenate(name)),
        icon: Check,
        size: "small",
        style: "text",
        tooltipProps: {
          content: t("neetoMolecules.common.actions.save"),
          position: "top"
        },
        onClick: handleMetadataSubmit
      })]
    })]
  });
};
var EditField$1 = /*#__PURE__*/React.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 = React.useState(item.isEditing),
    _useState2 = _slicedToArray(_useState, 2),
    isEditing = _useState2[0],
    setIsEditing = _useState2[1];
  var _useState3 = React.useState(item.value),
    _useState4 = _slicedToArray(_useState3, 2),
    value = _useState4[0],
    setValue = _useState4[1];
  var _useTranslation = reactI18next.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 = React.useMemo(function () {
    if (ramda.isNil(value)) return "-";
    if (typeof value === "boolean") return BOOLEAN_VALUES_MAP[value.toString()];
    if (name === "email") return value.toLowerCase();
    return value;
  }, [value]);
  var iconToRender = React.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);
  };
  React.useEffect(function () {
    setValue(item.value);
  }, [item]);
  var labelKey = neetoCist.hyphenate(name !== null && name !== void 0 ? name : label);
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    "data-cy": "metadata-".concat(labelKey, "-container"),
    "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 && neetoCist.isPresent(iconToRender) ? /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
      content: label || t("neetoMolecules.sessionEnvironment.details.keys.".concat(name)),
      children: /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "flex-shrink-0",
        children: iconToRender
      })
    }) : /*#__PURE__*/jsxRuntime.jsx(Typography, {
      className: "neeto-molecules-session-environment-editable-field neeto-ui-text-gray-600 whitespace-nowrap",
      "data-cy": "metadata-label-".concat(labelKey),
      "data-testid": "metadata-label-".concat(labelKey),
      style: "body2",
      children: label || t("neetoMolecules.sessionEnvironment.details.keys.".concat(name))
    }), !isEditing ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [kind === "datetime" ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Tooltip, {
        content: valueToRender,
        position: "top",
        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
          "data-cy": "metadata-value-".concat(labelKey),
          "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__*/jsxRuntime.jsx(CopyToClipboardButton, {
        className: "flex-shrink-0",
        size: "small",
        style: "text",
        value: valueToRender
      })]
    }) : /*#__PURE__*/jsxRuntime.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 ? neetoCist.noop : _ref$handleCancel,
    _ref$handleSubmit = _ref.handleSubmit,
    handleSubmit = _ref$handleSubmit === void 0 ? neetoCist.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__*/jsxRuntime.jsxs("div", {
    className: "mb-4",
    "data-testid": "details-block-items-parent",
    children: [title && /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "mb-2 flex items-center gap-2",
      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "neeto-ui-text-gray-700",
        style: "h5",
        textTransform: "uppercase",
        weight: "bold",
        children: title
      }), neetoCist.isPresent(helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread({}, helpPopoverProps))]
    }), details.filter(function (detail) {
      return detail.isEditable || isValuePresent(detail);
    }).map(function (detail, index) {
      return /*#__PURE__*/React.createElement(Item, {
        allowMultiline: allowMultiline,
        handleCancel: handleCancel,
        handleSubmit: handleSubmit,
        iconSize: iconSize,
        showIcons: showIcons,
        item: detail,
        key: index
      });
    })]
  });
};
var DetailsBlock$1 = /*#__PURE__*/React.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))}";
injectCss.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 ? neetoCist.noop : _ref$handleCancel,
    _ref$handleSubmit = _ref.handleSubmit,
    handleSubmit = _ref$handleSubmit === void 0 ? neetoCist.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 = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showViewMore = _useState2[0],
    setShowViewMore = _useState2[1];
  var customViewMoreItems = React.useMemo(function () {
    return neetoCist.filterBy({
      kind: "custom"
    }, moreDetails);
  }, [moreDetails]);
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  if (isLoading) {
    return /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "flex h-full w-full items-center justify-center",
      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
    });
  }
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "w-full",
    children: [/*#__PURE__*/jsxRuntime.jsx(DetailsBlock$1, {
      allowMultiline: allowMultiline,
      details: details,
      handleCancel: handleCancel,
      handleSubmit: handleSubmit,
      helpPopoverProps: helpPopoverProps,
      iconSize: iconSize,
      title: title,
      showIcons: true
    }), showViewMore && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [/*#__PURE__*/jsxRuntime.jsx("hr", {
        className: "neeto-ui-border-gray-200 my-4"
      }), /*#__PURE__*/jsxRuntime.jsx(DetailsBlock$1, {
        handleCancel: handleCancel,
        handleSubmit: handleSubmit,
        helpPopoverProps: helpPopoverProps,
        iconSize: iconSize,
        details: neetoCist.removeBy({
          kind: "custom"
        }, moreDetails)
      }), neetoCist.isPresent(customViewMoreItems) && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [/*#__PURE__*/jsxRuntime.jsx("hr", {
          className: "neeto-ui-border-gray-200 my-4"
        }), ramda.pluck("value", customViewMoreItems)]
      })]
    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
      className: "mb-4",
      "data-cy": "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(ramda.not);
      }
    })]
  });
};
var index = /*#__PURE__*/React.memo(SessionEnvironment);

module.exports = index;
//# sourceMappingURL=SessionEnvironment.js.map
