import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import IconButton from "@material-ui/core/IconButton";
import DownloadIcon from "@material-ui/icons/GetApp";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import Button from "@material-ui/core/Button";
import HeaderPopupBox from "../HeaderPopupBox";
import { useTranslation } from "react-i18next";
var Container = styled("div")({
  position: "relative"
});
var StyledButton = styled(Button)({
  justifyContent: "flex-start",
  "& .fakeicon": {
    display: "inline-block",
    marginRight: 8,
    padding: 4,
    textAlign: "center",
    paddingTop: 5,
    fontSize: 11,
    fontWeight: "bold",
    color: "#fff",
    backgroundColor: colors.grey[700],
    borderRadius: 4,
    width: 36,
    "&.blue": {
      backgroundColor: colors.blue[700]
    },
    "&.green": {
      backgroundColor: colors.green[700]
    },
    "&.orange": {
      backgroundColor: colors.orange[700]
    }
  }
});
export default (function (_ref) {
  var interfaceType = _ref.interfaceType,
      onDownload = _ref.onDownload;

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

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

  return /*#__PURE__*/React.createElement(Container, {
    onMouseEnter: function onMouseEnter() {
      return changeOpen(true);
    },
    onMouseLeave: function onMouseLeave() {
      return changeOpen(false);
    }
  }, /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(DownloadIcon, null)), /*#__PURE__*/React.createElement(HeaderPopupBox, {
    open: open
  }, /*#__PURE__*/React.createElement("h1", null, t("download")), /*#__PURE__*/React.createElement(StyledButton, {
    fullWidth: true,
    onClick: function onClick() {
      return onDownload("csv");
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "fakeicon green"
  }, "CSV"), t("download-csv")), /*#__PURE__*/React.createElement(StyledButton, {
    fullWidth: true,
    onClick: function onClick() {
      return onDownload("json");
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "fakeicon blue"
  }, "JSON"), t("download-json")), /*#__PURE__*/React.createElement(StyledButton, {
    fullWidth: true,
    target: "_blank",
    href: "https://universaldatatool.com/convert"
  }, /*#__PURE__*/React.createElement("div", {
    className: "fakeicon orange"
  }, "\u2197"), t("other-formats"))));
});