import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { lighten } from 'polished';
import styled, { css } from 'styled-components';
import { fontSize, grayLight, white } from '../../style/theme';
import { Button } from '../button/Button.component';
import { Icon } from '../icon/Icon.component';
const ChipsContainer = styled.div `
  display: inline-flex;
  .sc-chips-remove {
    padding-right: 10px;
    color: ${white};
    &:hover {
      color: ${grayLight};
    }
  }
  ${(props) => {
    switch (props.size) {
        case 'smaller':
            return css `
          border-radius: 10px;
          .sc-chips-icon {
            border-radius: 10px;
            padding: 5px;
          }
        `;
        case 'small':
            return css `
          border-radius: 12px;
          .sc-chips-icon {
            border-radius: 12px;
            padding: 6px;
          }
        `;
        case 'large':
            return css `
          border-radius: 14px;
          .sc-chips-icon {
            border-radius: 14px;
            padding: 6px;
          }
        `;
        case 'larger':
            return css `
          border-radius: 17px;
          .sc-chips-icon {
            border-radius: 17px;
            padding: 7px;
          }
        `;
        default:
            return css `
          border-radius: 12px;
          .sc-chips-icon {
            border-radius: 12px;
            padding: 6px;
          }
        `;
    }
}}
  ${(props) => {
    const brand = props.theme;
    return css `
      color: ${brand.textReverse};
    `;
}}

  ${(props) => {
    const brand = props.theme;
    const brandLight = lighten(0.1, brand[props.variant]).toString();
    return props.onClick
        ? css `
          background-color: ${brand[props.variant]};
          font-size: ${fontSize[props.size || 'base']};
          &:hover {
            cursor: pointer;
            background-color: ${brandLight};
          }
          &:active {
            background-color: ${brand[props.variant]};
          }
        `
        : css `
          background-color: ${brand[props.variant]};
          font-size: ${fontSize[props.size || 'base']};
        `;
}}
`;
export const ChipsIcon = styled.span `
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => lighten(0.15, props.theme[props.variant]).toString()};
`;
export const ChipsText = styled.span `
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: ${(props) => (props.icon || props.isRemovable ? '5px' : '5px 10px')};
`;
const Chips = ({ text = '', variant = 'infoPrimary', icon = undefined, onClick, onRemove, size = 'base', }) => (_jsxs(ChipsContainer, { className: "sc-chips", onClick: onClick, variant: variant, icon: icon, size: size, children: [icon && (_jsx(ChipsIcon, { className: "sc-chips-icon", text: text, variant: variant, size: size, children: icon })), _jsx(ChipsText, { className: "sc-chips-text", icon: icon, isRemovable: !!onRemove, children: text }), onRemove && (_jsx(Button
        // @ts-ignore
        , { 
            // @ts-ignore
            className: "sc-chips-remove", size: size, inverted: true, icon: _jsx(Icon, { name: "Close" }), onClick: onRemove }))] }));
export { Chips };
