import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

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 _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState } from "react";
import Warning from "../Icon/Warning";
import Tooltip from "../Tooltip";
import Link from "../Link";
import Checkbox from "../next/Checkbox";
import Plug from "../Icon/Plug";
import styled from "../styles/styled";
import Grid from "../CssGrid";
import SubAccount from "./SubAccount";
import Plus from "../Icon/Plus";
import LoadingClever from "../LoadingClever";

function Account(_ref) {
  var account = _ref.account,
      channel = _ref.channel,
      onLink = _ref.onLink,
      onAddSubAccount = _ref.onAddSubAccount,
      onSelect = _ref.onSelect,
      texts = _ref.texts;
  var id = account.id,
      name = account.name,
      isLinked = account.isLinked,
      switchActive = account.switchActive,
      subAccounts = account.subAccounts;

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

  var handleClick = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setIsLoading(true);
              _context.prev = 1;
              _context.next = 4;
              return onLink(account);

            case 4:
              _context.prev = 4;
              setIsLoading(false);
              return _context.finish(4);

            case 7:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[1,, 4, 7]]);
    }));

    return function handleClick() {
      return _ref2.apply(this, arguments);
    };
  }();

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(WarningWrapper, null, !isLinked && /*#__PURE__*/React.createElement(Tooltip, {
    title: texts.warningTooltip,
    color: "warning",
    spacing: 2
  }, /*#__PURE__*/React.createElement(Warning, {
    color: "warning"
  }))), /*#__PURE__*/React.createElement(StyledCheckbox, {
    checked: switchActive,
    onChange: function onChange() {
      return onSelect(_objectSpread(_objectSpread({}, account), {}, {
        active: !switchActive,
        channel: channel
      }));
    },
    disabled: !isLinked
  }, name, " ", id && "(".concat(id, ")")), !isLinked && /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement(LoadingClever, {
    size: 24
  }) : /*#__PURE__*/React.createElement(StyledButton // @ts-ignore
  , {
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(Plug, {
    color: "primary"
  }), texts.link))), switchActive && subAccounts && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
    gap: "md",
    mr: ["md", "3xl"],
    mb: "sm",
    maxHeight: "225px",
    overflowY: "auto",
    boxSizing: "border-box"
  }, subAccounts.map(function (subAccount, index) {
    return /*#__PURE__*/React.createElement(SubAccount, {
      key: "".concat(account.id, "-sub-account-").concat(index),
      channel: channel,
      parentId: account.id,
      onSelect: onSelect,
      subAccount: subAccount,
      texts: texts
    });
  }), onAddSubAccount &&
  /*#__PURE__*/
  // @ts-ignore
  React.createElement(StyledLink, {
    onClick: onAddSubAccount
  }, /*#__PURE__*/React.createElement(StyledPlus, {
    size: 16,
    color: "primary"
  }), texts.addSubAccount))));
}

var Root = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 40px 1fr auto;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n"])));
var WarningWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n\n  & path {\n    fill: ", " !important; // overrride IconButton style\n  }\n"])), function (props) {
  return props.theme.colors.warning[500];
});
var StyledCheckbox = styled(Checkbox)(function (_ref3) {
  var theme = _ref3.theme;
  return _objectSpread(_objectSpread({}, theme.typography.variants.inputText), {}, {
    overflow: "hidden",
    color: theme.colors.neutral[500],
    "&:has(input:checked)": {
      color: theme.colors.neutral[800]
    },
    "& > span:last-child": {
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }
  });
});
var StyledLink = styled(Link)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  font-family: ", ";\n\n  font-size: 1rem;\n"])), function (props) {
  return props.theme.spaces["3xl"];
}, function (props) {
  return props.theme.typography.font1;
});
var StyledPlus = styled(Plus)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n"])), function (props) {
  return props.theme.spaces.sm;
});
var StyledButton = styled(Link)(function (_ref4) {
  var theme = _ref4.theme;
  return _objectSpread(_objectSpread({}, theme.typography.variants.inputText), {}, {
    marginRight: theme.spaces.md
  });
});
export default Account;