import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import { useFormikContext } from 'formik';
import { isPresent, slugify } from '@bigbinary/neeto-cist';
import useOnClickOutside from '@bigbinary/neeto-commons-frontend/react-utils/useOnClickOutside';
import useHotkeys from '@bigbinary/neeto-hotkeys';
import Close from '@bigbinary/neeto-icons/Close';
import Typography from '@bigbinary/neetoui/Typography';
import Label from '@bigbinary/neetoui/Label';
import Button from '@bigbinary/neetoui/Button';
import Input from '@bigbinary/neetoui/formik/Input';
import { isEmpty } from 'ramda';
import { useTranslation } from 'react-i18next';
import { n } from './inject-css-C2dztUxs.js';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import Tooltip from '@bigbinary/neetoui/Tooltip';
import Switch from '@bigbinary/neetoui/formik/Switch';
import { jsx, jsxs } from 'react/jsx-runtime';

var useScrollIntoView = function useScrollIntoView(_ref) {
  var elementId = _ref.elementId,
    trigger = _ref.trigger;
  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))}";
n(css,{});

var _excluded = ["enabledCondition", "name", "isDisabled", "switchDataTestid", "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,
    switchDataTestid = _ref.switchDataTestid,
    _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__*/jsx(Tooltip, _objectSpread$1(_objectSpread$1({
    content: tooltipContent,
    disabled: !tooltipContent,
    position: "top"
  }, neetoUITooltipProps), {}, {
    children: /*#__PURE__*/jsx("span", {
      children: /*#__PURE__*/jsx(Switch, _objectSpread$1({
        disabled: isDisabled,
        "data-testid": isPresent(switchDataTestid) ? switchDataTestid : "toggle-feature-card-switch"
      }, _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$titleDataTestid = _ref.titleDataTestid,
    titleDataTestid = _ref$titleDataTestid === void 0 ? "" : _ref$titleDataTestid,
    _ref$switchDataTestid = _ref.switchDataTestid,
    switchDataTestid = _ref$switchDataTestid === void 0 ? "" : _ref$switchDataTestid,
    _ref$descriptionDataT = _ref.descriptionDataTestid,
    descriptionDataTestid = _ref$descriptionDataT === void 0 ? "" : _ref$descriptionDataT,
    _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 = useTranslation(),
    t = _useTranslation.t;
  var cardRef = useRef();
  var id = slugify(title);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isEditing = _useState2[0],
    setIsEditing = _useState2[1];
  var _useFormikContext = useFormikContext(),
    setFieldValue = _useFormikContext.setFieldValue,
    values = _useFormikContext.values,
    submitCount = _useFormikContext.submitCount,
    errors = _useFormikContext.errors,
    initialValues = _useFormikContext.initialValues;
  useEffect(function () {
    if (!(submitCount >= 1 && isEmpty(errors))) return;
    setIsEditing(false);
  }, [submitCount]);
  useEffect(function () {
    if (isEmpty(errors)) return;
    setIsEditing(true);
  }, [values, errors]);
  var _useState3 = 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__*/jsxs("div", {
    id: id,
    "data-testid": "feature-card-container",
    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__*/jsxs(Label, {
      className: "flex flex-row items-center gap-2",
      children: [/*#__PURE__*/jsx(TooltipSwitch, _objectSpread(_objectSpread({}, _objectSpread({
        enabledCondition: enabledCondition,
        isDisabled: isDisabled,
        switchDataTestid: switchDataTestid
      }, switchProps)), {}, {
        name: switchName
      })), /*#__PURE__*/jsx(Typography, {
        className: "leading-snug",
        component: "span",
        style: "h4",
        weight: "semibold",
        "data-testid": isPresent(titleDataTestid) ? titleDataTestid : "toggle-feature-card-title",
        children: title
      })]
    }), /*#__PURE__*/jsx(Typography, {
      className: "mb-4 whitespace-pre-line",
      style: "body2",
      "data-testid": isPresent(descriptionDataTestid) ? descriptionDataTestid : "toggle-feature-card-description",
      children: description
    }), hasInput && !isEditing && /*#__PURE__*/jsxs("div", {
      className: "m-0 flex flex-row items-center gap-x-2",
      children: [inputProps === null || inputProps === void 0 ? void 0 : inputProps.display, /*#__PURE__*/jsx(Button, _objectSpread({
        label: t("neetoMolecules.common.actions.edit"),
        size: "small",
        style: "link",
        type: "button",
        "data-testid": isPresent(inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonDataTestid) ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonDataTestid : "toggle-feature-card-input-display-edit",
        onClick: function onClick() {
          return setIsEditing(true);
        }
      }, editButtonProps))]
    }), hasInput && isEditing && /*#__PURE__*/jsx(Input, _objectSpread({
      autoFocus: true,
      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",
      "data-testid": isPresent(inputProps === null || inputProps === void 0 ? void 0 : inputProps.dataTestid) ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.dataTestid : "toggle-feature-card-input-field",
      suffix: /*#__PURE__*/jsx(Button, {
        "data-testid": "toggle-feature-card-input-reset",
        icon: Close,
        size: "small",
        style: "text",
        type: "button",
        onClick: handleInputReset
      })
    }, inputProps)), children]
  });
};

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