import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useState, useEffect } from "react";
import classnames from "classnames";
// ATOMS COMPONENTS START
import { IconButton } from "../IconButton/IconButton";
import { ButtonGroup } from "../ButtonGroup/ButtonGroup";
import { Input } from "../Input/Input";
import { Typography } from "../Typography/Typography"; // ATOMS COMOPONENTS END
//  HOOKS START

import useEditing from "./useEditing";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export const useValue = () => {
  const [value, setValue] = useState("");
  return {
    value,
    setValue
  };
}; // HOOKS END

export const TextEditable = props => {
  const {
    isLarge,
    content,
    setStore,
    setParent,
    isFocus,
    maxLength = 100,
    children,
    className
  } = props;
  const {
    isEditing,
    setIsEditing
  } = useEditing();
  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__*/_jsx("h1", {
        "data-testid": "editable",
        className: "editable",
        onClick: () => handleSetEditing(true),
        children: /*#__PURE__*/_jsx("span", {
          className: "simple_content",
          children: value
        })
      });
    }

    return /*#__PURE__*/_jsx(Typography, {
      onClick: () => handleSetEditing(true),
      children: value
    });
  };

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

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

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

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

  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsx("div", {
      className: "small_form",
      children: /*#__PURE__*/_jsx(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__*/_jsxs(ButtonGroup, {
          size: "small",
          shape: "square",
          children: [/*#__PURE__*/_jsx(IconButton, {
            backgroundColor: "warning",
            onClick: handleClick,
            children: "V"
          }), /*#__PURE__*/_jsx(IconButton, {
            variant: "outlined",
            backgroundColor: "#bdbdbd",
            onClick: handleClose,
            children: "X"
          })]
        })
      })
    })
  });
}