import React from 'react';
import { useUIDSeed } from 'react-uid';
import styled from 'styled-components';
import { OldIcon, Link, Flexbox, Spinner, Typography } from '../..';
var StyledIconThinChevron = styled(OldIcon.Chevron).withConfig({
  displayName: "ShowMoreButton__StyledIconThinChevron",
  componentId: "sc-1hnk6iw-0"
})(["margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
export var 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 = useUIDSeed();
  var spinnerId = seed('Spinner');
  return React.createElement(Flexbox, {
    container: true,
    justifyContent: align === 'left' ? 'flex-start' : 'center'
  }, React.createElement(Link, {
    onClick: !disabled ? onClick : function () {},
    disabled: disabled,
    "aria-expanded": expanded
  }, loading ? React.createElement(Spinner, {
    delay: false,
    id: spinnerId,
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.cta;
    }
  }) : React.createElement(Typography, {
    weight: "bold",
    type: "secondary",
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.cta;
    }
  }, expanded ? showLessText : showMoreText, React.createElement(StyledIconThinChevron, {
    size: 2,
    inline: true,
    fill: "currentColor",
    direction: expanded ? 'up' : 'down'
  }))));
};