'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var utils = require('./utils.js');
var index = require('../../utils/index.js');
var index$1 = require('../Interactive/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const selectedStyles = styled.css `
  background: ${index.getColorAlias('interactivePrimary')};
  color: ${index.getColorAlias('contentInteractivePrimary')};
`;
const disabledBackgroundStyles = styled.css `
  background: ${index.getColorAlias('disabled01')};
  &:hover {
    background: ${index.getDarkenColor('hover02', 'backgroundDefault')};
  }
`;
const flexCenter = styled.css `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const FlexDiv = styled__default['default'].div `
  ${flexCenter};
`;
const getChipPadding = (props) => {
    const { selected, showClose, isLoading } = props;
    if (selected && showClose) {
        if (isLoading) {
            return styled.css `
        padding: ${index.getSpacing('s01')};
      `;
        }
        return styled.css `
      padding: ${index.getSpacing('s01', 's01', 's01', 's03')};
    `;
    }
    return styled.css `
    padding: 6px 12px;
  `;
};
// @withConfig it is used to avoid warning of props are getting passed to underlying react node https://styled-components.com/docs/api#transient-props
const Chip = styled__default['default'](index$1.Interactive).withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'showClose',
        'isLoading',
    ]),
}) `
  ${flexCenter};
  box-sizing: border-box;
  height: 32px;
  ${(props) => getChipPadding(props)};
  outline: 2px solid transparent;
  border-radius: ${(props) => props.theme.radius.roundedD};
  text-align: center;
  ${index.getFontSize('size14')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
  ${index.getDefaultTransition()};

  ${({ disabled }) => disabled
    ? styled.css `
          ${disabledBackgroundStyles};
          color: ${index.getColorAlias('contentDisabled')};
        `
    : styled.css `
          background: ${index.getColorAlias('containerDefault')};
          color: ${index.getColorAlias('contentInteractiveSecondary')};
        `};

  svg {
    fill: ${({ selected = false, disabled = false }) => utils.getIconFill(selected, disabled)};
  }

  &:hover {
    cursor: ${({ disabled = false, showClose = false, selected = false, isLoading = false, }) => utils.getHoverCursor(disabled, showClose, selected, isLoading)};
  }

  &:focus,
  &:focus-within {
    outline-color: ${index.getColorAlias('focusOuter')};
  }
`;
const Ghost = styled__default['default'](Chip) `
  ${({ disabled, selected, isLoading }) => disabled
    ? disabledBackgroundStyles
    : styled.css `
          ${selected
        ? selectedStyles
        : styled.css `
                background: ${index.getColorAlias('containerDefault')};
                border: none;
                &:hover {
                  background: ${isLoading
            ? index.getColorAlias('containerDefault')
            : index.getDarkenColor('hover02', 'backgroundDefault')};
                }
                &:active {
                  background: ${isLoading
            ? index.getColorAlias('containerDefault')
            : index.getDarkenColor('active02', 'backgroundDefault')};
                }
              `}
        `};
`;
const Outlined = styled__default['default'](Chip) `
  ${({ disabled, selected, isLoading }) => disabled
    ? disabledBackgroundStyles
    : styled.css `
          ${selected
        ? selectedStyles
        : styled.css `
                background: ${index.getColorAlias('containerDefault')};
                border: 1px solid ${index.getColorAlias('borderDefault')};
                &:hover {
                  background: ${isLoading
            ? index.getColorAlias('containerDefault')
            : index.getDarkenColor('hover02', 'backgroundDefault')};
                }
                &:active {
                  background: ${isLoading
            ? index.getColorAlias('containerDefault')
            : index.getDarkenColor('active02', 'backgroundDefault')};
                }
              `}
        `};
`;
const Primary = styled__default['default'](Chip) `
  ${({ disabled, selected, isLoading }) => disabled
    ? disabledBackgroundStyles
    : styled.css `
          ${selected
        ? selectedStyles
        : styled.css `
                background: ${index.getColorAlias('containerSubtle')};
                &:hover {
                  background: ${isLoading
            ? index.getColorAlias('containerSubtle')
            : index.getDarkenColor('hover02', 'backgroundDefault')};
                }
                &:active {
                  background: ${isLoading
            ? index.getColorAlias('containerSubtle')
            : index.getDarkenColor('active02', 'backgroundDefault')};
                }
              `}
        `};
`;
const IconWrapper = styled__default['default'](FlexDiv) `
  svg {
    height: 16px;
    width: 16px;
    margin-right: ${index.getSpacing('s02')};
  }
`;
const CloseButton = styled__default['default'].button.withConfig({
    shouldForwardProp: (prop, isValidProp) => prop !== 'showClose' &&
        prop !== 'isLoading' &&
        isValidProp(prop),
}) `
  border: none;
  width: 21px;
  height: 21px;
  margin-left: ${index.getSpacing('s01')};
  padding: ${index.getSpacing('s00')};
  border-radius: ${(props) => props.theme.radius.roundedE};
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;

  svg {
    height: 16px;
    width: 16px;
    fill: ${index.getColorAlias('interactiveSecondary')};

    &:hover {
      scale: 1.1;
    }
  }

  &:hover {
    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  }
`;
const SpinnerWrapper = styled__default['default'](FlexDiv) `
  width: ${({ width, selected }) => width - (selected ? 20 : 22)}px;
  height: ${({ selected }) => (selected ? '24' : '20')}px;

  svg {
    stroke: ${({ selected }) => selected
    ? index.getColorAlias('contentInteractivePrimary')
    : index.getColorAlias('contentInteractiveSecondary')};
    height: 16px;
    width: 16px;
  }
`;

exports.Chip = Chip;
exports.CloseButton = CloseButton;
exports.FlexDiv = FlexDiv;
exports.Ghost = Ghost;
exports.IconWrapper = IconWrapper;
exports.Outlined = Outlined;
exports.Primary = Primary;
exports.SpinnerWrapper = SpinnerWrapper;
