'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var classnames = require('classnames');
var formik = require('formik');
var neetoCist = require('@bigbinary/neeto-cist');
var useOnClickOutside = require('@bigbinary/neeto-commons-frontend/react-utils/useOnClickOutside');
var useHotkeys = require('@bigbinary/neeto-hotkeys');
var Close = require('@bigbinary/neeto-icons/Close');
var Typography = require('@bigbinary/neetoui/Typography');
var Label = require('@bigbinary/neetoui/Label');
var Button = require('@bigbinary/neetoui/Button');
var Input = require('@bigbinary/neetoui/formik/Input');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var injectCss = require('./inject-css-B6qYtOJe.js');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var Tooltip = require('@bigbinary/neetoui/Tooltip');
var Switch = require('@bigbinary/neetoui/formik/Switch');
var jsxRuntime = require('react/jsx-runtime');

var useScrollIntoView = function useScrollIntoView(_ref) {
  var elementId = _ref.elementId,
    trigger = _ref.trigger;
  React.useEffect(function () {
    var _document$getElementB;
    if (!trigger) return;
    (_document$getElementB = document.getElementById(elementId)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView();
  }, [trigger]);
};

var css = ".toggle-feature-card--highlighted{border-color:rgb(var(--neeto-ui-primary-800))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-800))}";
injectCss.n(css,{});

var _excluded = ["enabledCondition", "name", "isDisabled", "switchDataCy", "tooltipProps"],
  _excluded2 = ["enabledSwitchText", "disabledSwitchText"];
function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TooltipSwitch = function TooltipSwitch(_ref) {
  var enabledCondition = _ref.enabledCondition,
    _ref$name = _ref.name,
    name = _ref$name === void 0 ? "" : _ref$name,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    switchDataCy = _ref.switchDataCy,
    _ref$tooltipProps = _ref.tooltipProps,
    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var enabledSwitchText = tooltipProps.enabledSwitchText,
    disabledSwitchText = tooltipProps.disabledSwitchText,
    neetoUITooltipProps = _objectWithoutProperties(tooltipProps, _excluded2);
  var tooltipContent = enabledCondition ? enabledSwitchText : disabledSwitchText;
  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, _objectSpread$1(_objectSpread$1({
    content: tooltipContent,
    disabled: !tooltipContent,
    position: "top"
  }, neetoUITooltipProps), {}, {
    children: /*#__PURE__*/jsxRuntime.jsx("span", {
      children: /*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$1({
        "data-cy": switchDataCy,
        "data-testid": "toggle-feature-card-switch",
        disabled: isDisabled
      }, _objectSpread$1({
        name: name
      }, otherProps)))
    })
  }));
};

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 ToggleFeatureCard = function ToggleFeatureCard(_ref) {
  var _ref$isCardStyleEnabl = _ref.isCardStyleEnabled,
    isCardStyleEnabled = _ref$isCardStyleEnabl === void 0 ? true : _ref$isCardStyleEnabl,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title,
    _ref$description = _ref.description,
    description = _ref$description === void 0 ? null : _ref$description,
    _ref$switchName = _ref.switchName,
    switchName = _ref$switchName === void 0 ? "switch" : _ref$switchName,
    _ref$titleDataCy = _ref.titleDataCy,
    titleDataCy = _ref$titleDataCy === void 0 ? "" : _ref$titleDataCy,
    _ref$switchDataCy = _ref.switchDataCy,
    switchDataCy = _ref$switchDataCy === void 0 ? "" : _ref$switchDataCy,
    _ref$descriptionDataC = _ref.descriptionDataCy,
    descriptionDataCy = _ref$descriptionDataC === void 0 ? "" : _ref$descriptionDataC,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    _ref$children = _ref.children,
    children = _ref$children === void 0 ? null : _ref$children,
    inputProps = _ref.inputProps,
    _ref$switchProps = _ref.switchProps,
    switchProps = _ref$switchProps === void 0 ? {} : _ref$switchProps,
    _ref$editButtonProps = _ref.editButtonProps,
    editButtonProps = _ref$editButtonProps === void 0 ? {} : _ref$editButtonProps,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var cardRef = React.useRef();
  var id = neetoCist.slugify(title);
  var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isEditing = _useState2[0],
    setIsEditing = _useState2[1];
  var _useFormikContext = formik.useFormikContext(),
    setFieldValue = _useFormikContext.setFieldValue,
    values = _useFormikContext.values,
    submitCount = _useFormikContext.submitCount,
    errors = _useFormikContext.errors,
    initialValues = _useFormikContext.initialValues;
  React.useEffect(function () {
    if (!(submitCount >= 1 && ramda.isEmpty(errors))) return;
    setIsEditing(false);
  }, [submitCount]);
  React.useEffect(function () {
    if (ramda.isEmpty(errors)) return;
    setIsEditing(true);
  }, [values, errors]);
  var _useState3 = React.useState(location.hash.split("#")[1] === id),
    _useState4 = _slicedToArray(_useState3, 2),
    shouldHighlight = _useState4[0],
    setShouldHighlight = _useState4[1];
  var hasInput = (values === null || values === void 0 ? void 0 : values[switchName]) && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.name);
  var enabledCondition = values === null || values === void 0 ? void 0 : values[switchName];
  var handleInputReset = function handleInputReset() {
    setIsEditing(false);
    hasInput && setFieldValue(inputProps === null || inputProps === void 0 ? void 0 : inputProps.name, initialValues === null || initialValues === void 0 ? void 0 : initialValues[inputProps === null || inputProps === void 0 ? void 0 : inputProps.name]);
  };
  useOnClickOutside(cardRef, function () {
    return setShouldHighlight(false);
  });
  useScrollIntoView({
    elementId: id,
    trigger: shouldHighlight
  });
  var inputRef = useHotkeys("enter", function () {
    return setIsEditing(false);
  }, {
    mode: "scoped"
  });
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    id: id,
    "data-cy": "feature-card-container",
    "data-testid": "toggle-feature-card",
    ref: cardRef,
    className: classnames("neeto-ui-bg-white  neeto-ui-rounded-lg flex flex-col gap-y-2", {
      "border p-4": isCardStyleEnabled
    }, {
      "neeto-ui-border-gray-300": !shouldHighlight
    }, {
      "toggle-feature-card--highlighted": shouldHighlight
    }, className),
    children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
      className: "flex flex-row items-center gap-2",
      children: [/*#__PURE__*/jsxRuntime.jsx(TooltipSwitch, _objectSpread(_objectSpread({}, _objectSpread({
        enabledCondition: enabledCondition,
        isDisabled: isDisabled,
        switchDataCy: switchDataCy
      }, switchProps)), {}, {
        name: switchName
      })), /*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "leading-snug",
        component: "span",
        "data-cy": titleDataCy,
        "data-testid": "toggle-feature-card-title",
        style: "h4",
        weight: "semibold",
        children: title
      })]
    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
      className: "mb-4 whitespace-pre-line",
      "data-cy": descriptionDataCy,
      "data-testid": "toggle-feature-card-description",
      style: "body2",
      children: description
    }), hasInput && !isEditing && /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "m-0 flex flex-row items-center gap-x-2",
      children: [inputProps === null || inputProps === void 0 ? void 0 : inputProps.display, /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread({
        "data-cy": inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonDataCy,
        "data-testid": "toggle-feature-card-input-display-edit",
        label: t("neetoMolecules.common.actions.edit"),
        size: "small",
        style: "link",
        type: "button",
        onClick: function onClick() {
          return setIsEditing(true);
        }
      }, editButtonProps))]
    }), hasInput && isEditing && /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread({
      autoFocus: true,
      "data-cy": inputProps === null || inputProps === void 0 ? void 0 : inputProps.dataCy,
      "data-testid": "toggle-feature-card-input-field",
      label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label,
      name: inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
      placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
      ref: inputRef,
      size: "medium",
      suffix: /*#__PURE__*/jsxRuntime.jsx(Button, {
        "data-testid": "toggle-feature-card-input-reset",
        icon: Close,
        size: "small",
        style: "text",
        type: "button",
        onClick: handleInputReset
      })
    }, inputProps)), children]
  });
};

module.exports = ToggleFeatureCard;
//# sourceMappingURL=ToggleFeatureCard.js.map
