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

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, { useState } from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import Chip from "../../../ui/Chip";
import Link from "../../../ui/Link";
import IconButton from "../../../ui/next/IconButton";
import Collapse from "../../../ui/Collapse";
import Megaphone from "../../../ui/Icon/Megaphone";
import ChevronRight from "../../../ui/Icon/ChevronRight";
import styled from "../../../ui/styles/styled";
import { CHANNEL_ICONS } from "../constants";

function AccountsSummary(_ref) {
  var _accounts$length;

  var translations = _ref.translations,
      accounts = _ref.accounts,
      goToStep = _ref.goToStep;

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

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm",
    mt: "xl",
    mb: "sm"
  }, /*#__PURE__*/React.createElement(Megaphone, {
    color: "primary"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800
  }, translations.title), /*#__PURE__*/React.createElement(StyledChip, {
    label: translations.selected_chip.replace("{accounts}", (_accounts$length = accounts === null || accounts === void 0 ? void 0 : accounts.length) !== null && _accounts$length !== void 0 ? _accounts$length : 0),
    variant: "outlined",
    color: "neutral"
  }), /*#__PURE__*/React.createElement(StyledLink, {
    onClick: function onClick() {
      return goToStep("connect");
    }
  }, translations.update_button), /*#__PURE__*/React.createElement(Trigger, {
    icon: /*#__PURE__*/React.createElement(ChevronRight, null),
    onClick: function onClick() {
      return setOpen(!open);
    },
    "data-open": open
  })), /*#__PURE__*/React.createElement(StyledCollapse, {
    open: open
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md",
    mt: "sm"
  }, accounts.map(function (account) {
    var Icon = CHANNEL_ICONS[account.channel];
    return /*#__PURE__*/React.createElement(CssFlex, {
      key: "connected-account-".concat(account.channel),
      alignItems: "center",
      gap: "sm",
      px: "lg"
    }, /*#__PURE__*/React.createElement(Icon, {
      size: 32
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "inputText"
    }, account.name));
  }))));
}

var StyledLink = styled(Link)(function (_ref2) {
  var theme = _ref2.theme;
  return _objectSpread(_objectSpread({}, theme.typography.variants.small), {}, {
    textDecoration: "underline"
  });
});
var StyledChip = styled(Chip)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    color: theme.colors.neutral[400],
    "& > p": {
      color: theme.colors.neutral[400]
    }
  };
});
var Trigger = styled(IconButton)(function (_ref4) {
  var theme = _ref4.theme;
  return {
    marginLeft: "auto",
    transitionDuration: theme.transitions.duration["short"],
    transitionProperty: "transform",
    "&[data-open=\"true\"]": {
      transform: "rotate(90deg)"
    }
  };
});
var StyledCollapse = styled(Collapse)(function (_ref5) {
  var theme = _ref5.theme;
  return {
    paddingBottom: theme.spaces.lg,
    borderBottom: "1px solid ".concat(theme.colors.neutral[200])
  };
});
export default AccountsSummary;