"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.useValue = exports.TextEditable = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _IconButton = require("../IconButton/IconButton");

var _ButtonGroup = require("../ButtonGroup/ButtonGroup");

var _Input = require("../Input/Input");

var _Typography = require("../Typography/Typography");

var _useEditing = _interopRequireDefault(require("./useEditing"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Generated with util/create-component.js
// ATOMS COMPONENTS START
// ATOMS COMOPONENTS END
//  HOOKS START
const useValue = () => {
  const [value, setValue] = (0, _react.useState)("");
  return {
    value,
    setValue
  };
}; // HOOKS END


exports.useValue = useValue;

const TextEditable = props => {
  const {
    isLarge,
    content,
    setStore,
    setParent,
    isFocus,
    maxLength = 100,
    children,
    className
  } = props;
  const {
    isEditing,
    setIsEditing
  } = (0, _useEditing.default)();
  const {
    value,
    setValue
  } = useValue();

  const handleSetEditing = bool => {
    setIsEditing(bool);
    if (setParent) setParent(bool);
  };

  const handleClose = e => {
    e.preventDefault();
    handleSetEditing(false);
    setValue(content);
  };

  const handleSave = () => {
    if (isLarge) {
      setStore(value);
    } else {
      // setStore({ title: value, index });
      setStore(value);
    }

    handleSetEditing(false);
  };

  const textRender = () => {
    if (isLarge) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
        "data-testid": "editable",
        className: "editable",
        onClick: () => handleSetEditing(true),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "simple_content",
          children: value
        })
      });
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
      onClick: () => handleSetEditing(true),
      children: value
    });
  };

  (0, _react.useEffect)(() => {
    setValue(content);
    if (isFocus) setIsEditing(isFocus);
  }, [setValue, isFocus]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-TextEditable",
    className: "jsx-4004568170" + " " + ((0, _classnames.default)("Wps-TextEditable", className) || ""),
    children: [!isEditing && textRender(), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(AddForm, {
      value: value,
      setValue: setValue,
      handleClose: handleClose,
      handleSave: handleSave,
      maxLength: maxLength
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "4004568170",
      children: ".Wps-TextEditable.jsx-4004568170{color:black;}"
    }), children]
  });
}; // Add Form


exports.TextEditable = TextEditable;

function AddForm(props) {
  const {
    value,
    setValue,
    handleSave,
    handleClose,
    placeholder,
    maxLength
  } = props;

  const handleKeypress = e => {
    if (e.key === "Enter") {
      handleSave();
    }
  };

  const handleClick = () => {
    handleSave();
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "small_form",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
        "data-testid": "input",
        ref: input => input && input.focus(),
        className: "editable_field",
        onKeyPress: handleKeypress,
        variant: "ghost",
        value: value,
        color: "basic",
        maxLength: maxLength,
        placeholder: placeholder,
        "aria-label": placeholder,
        onChange: e => setValue(e.target.value),
        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.ButtonGroup, {
          size: "small",
          shape: "square",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
            backgroundColor: "warning",
            onClick: handleClick,
            children: "V"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
            variant: "outlined",
            backgroundColor: "#bdbdbd",
            onClick: handleClose,
            children: "X"
          })]
        })
      })
    })
  });
}