import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useState, useEffect } from "react";
import { useLocalStorage } from "react-use";
import IconButton from "@material-ui/core/IconButton";
import PeopleIcon from "@material-ui/icons/People";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import AddBoxTwoTone from "@material-ui/icons/AddBoxTwoTone";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import CircularProgress from "@material-ui/core/CircularProgress";
import usePosthog from "../../hooks/use-posthog";
import { useTranslation } from "react-i18next";
var Container = styled("div")({
  position: "relative"
});
var WIDTH = 300;
var borderColor = colors.grey[500];
var popupBoxBeforeAndAfter = {
  bottom: "100%",
  left: "25%",
  border: "solid transparent",
  content: '" "',
  height: 0,
  width: 0,
  position: "absolute",
  pointerEvents: "none"
};
var PopupBox = styled("div")({
  position: "absolute",
  zIndex: 10,
  top: 45,
  padding: 16,
  boxSizing: "border-box",
  borderRadius: 4,
  left: -WIDTH / 4 + 22,
  backgroundColor: "#fff",
  border: "1px solid ".concat(borderColor),
  width: WIDTH,
  minHeight: 200,
  boxShadow: "0px 3px 12px rgba(0,0,0,0.3)",
  "&:before": _objectSpread(_objectSpread({}, popupBoxBeforeAndAfter), {}, {
    borderColor: "rgba(0,0,0, 0)",
    borderBottomColor: borderColor,
    borderWidth: 12,
    marginLeft: -12
  }),
  "&:after": _objectSpread(_objectSpread({}, popupBoxBeforeAndAfter), {}, {
    borderColor: "rgba(255,255,255, 0)",
    borderBottomColor: "#fff",
    borderWidth: 10,
    marginLeft: -10
  }),
  "& h1": {
    fontSize: 18,
    marginTop: 0,
    color: colors.blue[800]
  },
  "& h2": {
    fontSize: 14,
    color: colors.grey[800]
  },
  opacity: 1,
  transition: "opacity 200ms linear, transform 200ms ease",
  "&.hidden": {
    opacity: 0,
    transform: "translate(0, 10px)",
    pointerEvents: "none"
  }
});
var ErrorText = styled("div")({
  color: colors.red[500],
  padding: 8,
  fontSize: 14
});
var CreateNewButton = styled(Button)({
  marginTop: 16,
  justifyContent: "flex-start",
  color: colors.blue[500],
  "& .icon": {
    marginRight: 8,
    opacity: 0.7
  }
});
var ExitButton = styled(Button)({
  marginTop: 16,
  justifyContent: "flex-start",
  "& .icon": {
    marginRight: 8,
    opacity: 0.7,
    color: colors.red[500]
  }
});
export default (function (_ref) {
  var _ref$fileOpen = _ref.fileOpen,
      fileOpen = _ref$fileOpen === void 0 ? false : _ref$fileOpen,
      _ref$inSession = _ref.inSession,
      inSession = _ref$inSession === void 0 ? false : _ref$inSession,
      error = _ref.error,
      onJoinSession = _ref.onJoinSession,
      onCreateSession = _ref.onCreateSession,
      onLeaveSession = _ref.onLeaveSession,
      sessionBoxOpen = _ref.sessionBoxOpen,
      changeSessionBoxOpen = _ref.changeSessionBoxOpen;

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

  var _useState3 = useState(""),
      _useState4 = _slicedToArray(_useState3, 2),
      sessionUrl = _useState4[0],
      changeSessionUrl = _useState4[1];

  var _useLocalStorage = useLocalStorage("userName", "anonymous"),
      _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
      userName = _useLocalStorage2[0],
      changeUserName = _useLocalStorage2[1];

  var posthog = usePosthog(); // internalization hook

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  useEffect(function () {
    if (loadingSession) {
      setTimeout(function () {
        changeLoadingSession(false);
      }, 10000);
    }
  }, [loadingSession]);
  return /*#__PURE__*/React.createElement(Container, {
    title: "collaborate-icon",
    onMouseEnter: function onMouseEnter() {
      return changeSessionBoxOpen(true);
    },
    onMouseLeave: function onMouseLeave() {
      return changeSessionBoxOpen(false);
    }
  }, /*#__PURE__*/React.createElement(IconButton, {
    style: {
      color: inSession ? colors.blue[500] : undefined
    }
  }, /*#__PURE__*/React.createElement(PeopleIcon, null)), /*#__PURE__*/React.createElement(PopupBox, {
    className: sessionBoxOpen ? "" : "hidden"
  }, /*#__PURE__*/React.createElement("h1", null, t("collaborate")), !inSession ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, t("join-a-session")), /*#__PURE__*/React.createElement(TextField, {
    variant: "outlined",
    label: "URL to Session",
    value: sessionUrl,
    onChange: function onChange(e) {
      return changeSessionUrl(e.target.value);
    },
    InputProps: {
      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
        position: "end"
      }, /*#__PURE__*/React.createElement(IconButton, {
        color: "primary",
        onClick: function onClick() {
          posthog.capture("join_collaborative_session");
          onJoinSession(sessionUrl);
        },
        disabled: !sessionUrl
      }, /*#__PURE__*/React.createElement(ArrowForwardIcon, null)))
    }
  }), error && /*#__PURE__*/React.createElement(ErrorText, null, error), /*#__PURE__*/React.createElement(CreateNewButton, {
    fullWidth: true,
    disabled: !fileOpen || loadingSession || error,
    onClick: function onClick() {
      posthog.capture("create_collaborative_session");
      onCreateSession();
      changeLoadingSession(true);
    }
  }, loadingSession ? /*#__PURE__*/React.createElement(CircularProgress, {
    className: "icon",
    size: 24
  }) : /*#__PURE__*/React.createElement(AddBoxTwoTone, {
    className: "icon"
  }), "Create New Session")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, {
    style: {
      marginTop: 12
    },
    variant: "outlined",
    label: "User Name",
    value: userName,
    onChange: function onChange(e) {
      return changeUserName(e.target.value);
    }
  }), /*#__PURE__*/React.createElement(ExitButton, {
    fullWidth: true,
    onClick: onLeaveSession
  }, /*#__PURE__*/React.createElement(ExitToAppIcon, {
    className: "icon"
  }), t("leave-session")))));
});