import React from "react";
import { styled } from "@material-ui/core/styles";
import MuiButton from "@material-ui/core/Button";
import * as colors from "@material-ui/core/colors";
import usePosthog from "../../hooks/use-posthog";
import useIsDesktop from "../../hooks/use-is-desktop";
import { useTranslation } from "react-i18next";
import classnames from "classnames";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import { SelectDialogContext } from "./";
var ButtonBase = styled(MuiButton)({
  width: 240,
  height: 140,
  display: "inline-flex",
  flexDirection: "column",
  "&.disabled": {
    backgroundColor: colors.grey[200]
  },
  margin: 8,
  "& .icon": {
    width: 36,
    height: 36,
    color: colors.grey[600],
    "&.disabled": {
      color: colors.grey[400]
    }
  }
});
var DesktopOnlyText = styled("div")({
  fontSize: 11,
  fontWeight: "bold",
  color: colors.grey[600],
  "&.disabled": {
    color: colors.grey[500]
  }
});
export var Button = function Button(_ref) {
  var Icon1 = _ref.Icon1,
      Icon2 = _ref.Icon2,
      desktopOnly = _ref.desktopOnly,
      children = _ref.children,
      dialog = _ref.dialog,
      disabled = _ref.disabled,
      _onClick = _ref.onClick;
  var isDesktop = useIsDesktop();
  var posthog = usePosthog();

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

  disabled = disabled === undefined ? desktopOnly ? !isDesktop : false : disabled;
  return /*#__PURE__*/React.createElement(SelectDialogContext.Consumer, null, function (_ref2) {
    var onChangeDialog = _ref2.onChangeDialog;
    return /*#__PURE__*/React.createElement(ButtonBase, {
      onClick: function onClick() {
        posthog.capture("transform_button_clicked", {
          transform_button: dialog || children
        });
        if (_onClick) return _onClick();
        onChangeDialog(dialog);
      },
      className: classnames({
        disabled: disabled
      }),
      variant: "outlined",
      disabled: disabled
    }, /*#__PURE__*/React.createElement("div", null, Icon1 && Icon2 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon1, {
      className: classnames("icon", {
        disabled: disabled
      })
    }), /*#__PURE__*/React.createElement(ArrowForwardIcon, {
      className: classnames("icon", {
        disabled: disabled
      })
    }), /*#__PURE__*/React.createElement(Icon2, {
      className: classnames("icon", {
        disabled: disabled
      })
    })) : /*#__PURE__*/React.createElement(Icon1, {
      className: classnames("icon", {
        disabled: disabled
      })
    }), /*#__PURE__*/React.createElement("div", null, children), desktopOnly && /*#__PURE__*/React.createElement(DesktopOnlyText, {
      className: classnames({
        disabled: disabled
      })
    }, t("desktop-only").toUpperCase())));
  });
};
export default Button;