import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import Button from "../../../ui/next/Button";
import styled from "../../../ui/styles/styled";
import { CHANNEL_ICONS, CHANNEL_NAMES } from "../constants";

function DetectedAccounts(_ref) {
  var translations = _ref.translations,
      detectedAccounts = _ref.detectedAccounts,
      onConnect = _ref.onConnect;
  return /*#__PURE__*/React.createElement(Root, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(Description, {
    variant: "small"
  }, translations.description), detectedAccounts.map(function (account) {
    var Icon = CHANNEL_ICONS[account.channel];
    return /*#__PURE__*/React.createElement(CssFlex, {
      key: account.channel,
      justifyContent: "space-between",
      alignItems: "center"
    }, /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "center",
      gap: "sm"
    }, /*#__PURE__*/React.createElement(Icon, {
      size: 32
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "label",
      weight: "bold"
    }, CHANNEL_NAMES[account.channel])), account.connected ? /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph"
    }, translations.connected) : /*#__PURE__*/React.createElement(ConnectButton, {
      variant: "secondary",
      onClick: function onClick() {
        return onConnect(account.channel);
      }
    }, translations.connect_button));
  }));
}

var Root = styled(CssFlex)(function (_ref2) {
  var theme = _ref2.theme;
  return {
    padding: "".concat(theme.spaces.xl, " 0"),
    marginTop: theme.spaces.xl,
    border: "solid ".concat(theme.colors.neutral[200]),
    borderWidth: "1px 0"
  };
});
var Description = styled(Typography)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    marginBottom: theme.spaces.sm
  };
});
var ConnectButton = styled(Button)(function (_ref4) {
  var theme = _ref4.theme;
  return {
    padding: "".concat(theme.spaces.xs, " ").concat(theme.spaces.sm),
    minHeight: "unset",
    borderRadius: "32px",
    borderWidth: 1,
    "& p": _objectSpread(_objectSpread({}, theme.typography.variants.small), {}, {
      fontWeight: 600
    })
  };
});
export default DetectedAccounts;