"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ShowMoreButton = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactUid = require("react-uid");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledIconThinChevron = (0, _styledComponents.default)(_.OldIcon.Chevron).withConfig({
  displayName: "ShowMoreButton__StyledIconThinChevron",
  componentId: "sc-1hnk6iw-0"
})(["margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
var ShowMoreButton = exports.ShowMoreButton = function ShowMoreButton(_ref) {
  var _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    _ref$expanded = _ref.expanded,
    expanded = _ref$expanded === void 0 ? false : _ref$expanded,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$align = _ref.align,
    align = _ref$align === void 0 ? 'center' : _ref$align,
    _ref$showMoreText = _ref.showMoreText,
    showMoreText = _ref$showMoreText === void 0 ? 'Show more' : _ref$showMoreText,
    _ref$showLessText = _ref.showLessText,
    showLessText = _ref$showLessText === void 0 ? 'Show less' : _ref$showLessText;
  var seed = (0, _reactUid.useUIDSeed)();
  var spinnerId = seed('Spinner');
  return _react.default.createElement(_.Flexbox, {
    container: true,
    justifyContent: align === 'left' ? 'flex-start' : 'center'
  }, _react.default.createElement(_.Link, {
    onClick: !disabled ? onClick : function () {},
    disabled: disabled,
    "aria-expanded": expanded
  }, loading ? _react.default.createElement(_.Spinner, {
    delay: false,
    id: spinnerId,
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.cta;
    }
  }) : _react.default.createElement(_.Typography, {
    weight: "bold",
    type: "secondary",
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.cta;
    }
  }, expanded ? showLessText : showMoreText, _react.default.createElement(StyledIconThinChevron, {
    size: 2,
    inline: true,
    fill: "currentColor",
    direction: expanded ? 'up' : 'down'
  }))));
};