import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import * as colors from "@material-ui/core/colors";
import { styled } from "@material-ui/core/styles";
import { useAppConfig } from "../AppConfig";
import SaveIcon from "@material-ui/icons/Save";
import CircularProgress from "@material-ui/core/CircularProgress";
import usePosthog from "../../hooks/use-posthog";
var Title = styled("div")({
  fontSize: 18,
  color: colors.grey[800],
  padding: 16,
  "& a": {
    color: colors.blue[600]
  }
});
var LabelHelpIs = styled("div")({
  fontSize: 18,
  lineHeight: 1.5,
  color: colors.grey[800],
  padding: 16,
  width: 800
});
var ErrorText = styled("div")({
  color: colors.red[600]
});
export default (function () {
  var _useAppConfig = useAppConfig(),
      setInConfig = _useAppConfig.setInConfig;

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

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

  var _useState5 = useState(""),
      _useState6 = _slicedToArray(_useState5, 2),
      error = _useState6[0],
      setError = _useState6[1];

  var posthog = usePosthog();
  return /*#__PURE__*/React.createElement(Box, {
    paddingTop: 8,
    textAlign: "center"
  }, /*#__PURE__*/React.createElement(LabelHelpIs, null, "Label Help is a UDT-integrated service that crowd-sources your labeling, it's about the same speed as having a team of 5-10 full-time labelers."), /*#__PURE__*/React.createElement(Title, null, "To use Label Help, enter your API key. You can", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://labelhelp.universaldatatool.com" // eslint-disable-next-line
    ,
    target: "_blank",
    onClick: function onClick() {
      return posthog.capture("get_api_key_link_clicked");
    }
  }, "get an API key here"), "."), error && /*#__PURE__*/React.createElement(ErrorText, null, error), /*#__PURE__*/React.createElement(Box, {
    paddingTop: 2,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column"
  }, /*#__PURE__*/React.createElement(TextField, {
    onChange: function onChange(e) {
      return setTextFieldValue(e.target.value);
    },
    className: "label-help-api-key-text-field",
    variant: "outlined",
    label: "API Key"
  }), /*#__PURE__*/React.createElement(Button, {
    style: {
      marginTop: 16
    },
    color: "primary",
    disabled: verifying,
    variant: "outlined",
    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var response;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setError(null);
              setVerifying(true);
              _context.prev = 2;
              _context.next = 5;
              return fetch("https://labelhelp.universaldatatool.com/api/me", {
                headers: {
                  apikey: textFieldValue
                }
              });

            case 5:
              response = _context.sent;

              if (!(response.status !== 200)) {
                _context.next = 8;
                break;
              }

              throw new Error(response.toString());

            case 8:
              _context.next = 15;
              break;

            case 10:
              _context.prev = 10;
              _context.t0 = _context["catch"](2);
              setError(_context.t0.toString());
              setVerifying(false);
              return _context.abrupt("return");

            case 15:
              setVerifying(false);
              setInConfig("labelhelp.apikey", textFieldValue);
              posthog.capture("save_api_key_button_clicked");

            case 18:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[2, 10]]);
    }))
  }, verifying ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularProgress, {
    size: 18,
    style: {
      marginRight: 16
    }
  }), "Checking...") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SaveIcon, {
    style: {
      marginRight: 8
    }
  }), "Save"))));
});