import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useCallback } from "react";
import slugify from "slugify";
import { connect } from "../../../redux";
import { Input } from "@webiny/ui/Input";
import { updateRevision } from "../../../actions";
import { getPage } from "../../../selectors";
import { Tooltip } from "@webiny/ui/Tooltip";
import { Typography } from "@webiny/ui/Typography";
import { PageMeta, PageTitle, pageTitleWrapper, PageVersion, TitleInputWrapper, TitleWrapper } from "./Styled";

var Title = function Title(_ref) {
  var pageTitle = _ref.pageTitle,
      pageCategory = _ref.pageCategory,
      pageCategoryUrl = _ref.pageCategoryUrl,
      pageLocked = _ref.pageLocked,
      pageVersion = _ref.pageVersion,
      updateRevision = _ref.updateRevision;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      editTitle = _useState2[0],
      setEdit = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      stateTitle = _useState4[0],
      setTitle = _useState4[1];

  var title = stateTitle === null ? pageTitle : stateTitle;
  var enableEdit = useCallback(function () {
    return setEdit(true);
  }, []);
  var onBlur = useCallback(function () {
    if (title === "") {
      title = "Untitled";
      setTitle(title);
    }

    setEdit(false);
    updateRevision(getRevData({
      title: title,
      pageTitle: pageTitle,
      pageCategoryUrl: pageCategoryUrl
    }));
  }, [title]);
  var onKeyDown = useCallback(function (e) {
    // @ts-ignore
    switch (e.key) {
      case "Escape":
        e.preventDefault();
        setEdit(false);
        setTitle(pageTitle);
        break;

      case "Enter":
        if (title === "") {
          title = "Untitled";
          setTitle(title);
        }

        e.preventDefault();
        setEdit(false);
        updateRevision(getRevData({
          title: title,
          pageTitle: pageTitle,
          pageCategoryUrl: pageCategoryUrl
        }));
        break;

      default:
        return;
    }
  }, [title, pageTitle]); // Disable autoFocus because for some reason, blur event would automatically be triggered when clicking
  // on the page title when doing Cypress testing. Not sure if this is RMWC or Cypress related issue.

  var autoFocus = !window.Cypress;
  return editTitle ? /*#__PURE__*/React.createElement(TitleInputWrapper, null, /*#__PURE__*/React.createElement(Input, {
    autoFocus: autoFocus,
    fullwidth: true,
    value: title,
    onChange: setTitle,
    onKeyDown: onKeyDown,
    onBlur: onBlur
  })) : /*#__PURE__*/React.createElement(TitleWrapper, null, /*#__PURE__*/React.createElement(PageMeta, null, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, "".concat(pageCategory, " (status: ").concat(pageLocked ? "published" : "draft", ")"))), /*#__PURE__*/React.createElement("div", {
    style: {
      width: "100%",
      display: "flex"
    }
  }, /*#__PURE__*/React.createElement(Tooltip, {
    className: pageTitleWrapper,
    placement: "bottom",
    content: /*#__PURE__*/React.createElement("span", null, "Rename")
  }, /*#__PURE__*/React.createElement(PageTitle, {
    "data-testid": "pb-editor-page-title",
    onClick: enableEdit
  }, title)), /*#__PURE__*/React.createElement(PageVersion, null, "(v".concat(pageVersion, ")"))));
};

var getRevData = function getRevData(_ref2) {
  var title = _ref2.title,
      pageTitle = _ref2.pageTitle,
      pageCategoryUrl = _ref2.pageCategoryUrl;
  var newData = {
    title: title
  };

  if (pageTitle === "Untitled") {
    newData.url = pageCategoryUrl + slugify(title, {
      replacement: "-",
      lower: true,
      remove: /[*#\?<>_\{\}\[\]+~.()'"!:;@]/g
    });
  }

  return newData;
};

export default connect(function (state) {
  var _getPage = getPage(state),
      title = _getPage.title,
      version = _getPage.version,
      locked = _getPage.locked,
      category = _getPage.category;

  return {
    pageTitle: title,
    pageVersion: version,
    pageLocked: locked,
    pageCategory: category.name,
    pageCategoryUrl: category.url
  };
}, {
  updateRevision: updateRevision
})( /*#__PURE__*/React.memo(Title));
//# sourceMappingURL=Title.js.map