import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import { styled } from "@material-ui/core";
import InfoIcon from "@material-ui/icons/Info";
import IconButton from "@material-ui/core/IconButton";
import HeaderPopupBox from "../HeaderPopupBox";
import TextField from "@material-ui/core/TextField";
import EditableTitleText from "./EditableTitleText.js";
import useActiveDatasetManager from "../../hooks/use-active-dataset-manager";
import useDatasetProperty from "../../hooks/use-dataset-property";
var Container = styled("div")({
  position: "relative"
});
export var InfoButton = function InfoButton() {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      sessionBoxOpen = _useState2[0],
      setSessionBoxOpen = _useState2[1];

  var _useActiveDatasetMana = useActiveDatasetManager(),
      _useActiveDatasetMana2 = _slicedToArray(_useActiveDatasetMana, 1),
      dm = _useActiveDatasetMana2[0];

  var _useDatasetProperty = useDatasetProperty("name"),
      name = _useDatasetProperty.name,
      updateName = _useDatasetProperty.updateName;

  var shareURL;

  if (dm.type === "collaborative-session") {
    shareURL = "".concat(window.location.origin, "?s=").concat(dm.sessionId);
  }

  return /*#__PURE__*/React.createElement(Container, {
    title: "info-icon",
    onMouseEnter: function onMouseEnter() {
      return setSessionBoxOpen(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setSessionBoxOpen(false);
    }
  }, /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(HeaderPopupBox, {
    open: sessionBoxOpen
  }, /*#__PURE__*/React.createElement("h1", null, "Info"), dm.type === "collaborative-session" ? /*#__PURE__*/React.createElement(TextField, {
    label: "Share Link",
    title: "share-link",
    value: shareURL,
    variant: "outlined",
    size: "small"
  }) : /*#__PURE__*/React.createElement(EditableTitleText, {
    label: "File Name",
    onChange: function onChange(newName) {
      updateName(newName);
    },
    value: name
  })));
};
export default InfoButton;