import styled, { css } from 'styled-components';
import { getIconFill, getHoverCursor } from './utils.js';
import { getColorAlias, getDarkenColor, convertToTransientProps, getFontSize, getDefaultTransition, getSpacing } from '../../utils/index.js';
import { Interactive } from '../Interactive/index.js';

const selectedStyles = css `
  background: ${getColorAlias('interactivePrimary')};
  color: ${getColorAlias('contentInteractivePrimary')};
`;
const disabledBackgroundStyles = css `
  background: ${getColorAlias('disabled01')};
  &:hover {
    background: ${getDarkenColor('hover02', 'backgroundDefault')};
  }
`;
const flexCenter = css `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const FlexDiv = styled.div `
  ${flexCenter};
`;
const getChipPadding = (props) => {
    const { selected, showClose, isLoading } = props;
    if (selected && showClose) {
        if (isLoading) {
            return css `
        padding: ${getSpacing('s01')};
      `;
        }
        return css `
      padding: ${getSpacing('s01', 's01', 's01', 's03')};
    `;
    }
    return 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(Interactive).withConfig({
    shouldForwardProp: 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;
  ${getFontSize('size14')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
  ${getDefaultTransition()};

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

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

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

  &:focus,
  &:focus-within {
    outline-color: ${getColorAlias('focusOuter')};
  }
`;
const Ghost = styled(Chip) `
  ${({ disabled, selected, isLoading }) => disabled
    ? disabledBackgroundStyles
    : css `
          ${selected
        ? selectedStyles
        : css `
                background: ${getColorAlias('containerDefault')};
                border: none;
                &:hover {
                  background: ${isLoading
            ? getColorAlias('containerDefault')
            : getDarkenColor('hover02', 'backgroundDefault')};
                }
                &:active {
                  background: ${isLoading
            ? getColorAlias('containerDefault')
            : getDarkenColor('active02', 'backgroundDefault')};
                }
              `}
        `};
`;
const Outlined = styled(Chip) `
  ${({ disabled, selected, isLoading }) => disabled
    ? disabledBackgroundStyles
    : css `
          ${selected
        ? selectedStyles
        : css `
                background: ${getColorAlias('containerDefault')};
                border: 1px solid ${getColorAlias('borderDefault')};
                &:hover {
                  background: ${isLoading
            ? getColorAlias('containerDefault')
            : getDarkenColor('hover02', 'backgroundDefault')};
                }
                &:active {
                  background: ${isLoading
            ? getColorAlias('containerDefault')
            : getDarkenColor('active02', 'backgroundDefault')};
                }
              `}
        `};
`;
const Primary = styled(Chip) `
  ${({ disabled, selected, isLoading }) => disabled
    ? disabledBackgroundStyles
    : css `
          ${selected
        ? selectedStyles
        : css `
                background: ${getColorAlias('containerSubtle')};
                &:hover {
                  background: ${isLoading
            ? getColorAlias('containerSubtle')
            : getDarkenColor('hover02', 'backgroundDefault')};
                }
                &:active {
                  background: ${isLoading
            ? getColorAlias('containerSubtle')
            : getDarkenColor('active02', 'backgroundDefault')};
                }
              `}
        `};
`;
const IconWrapper = styled(FlexDiv) `
  svg {
    height: 16px;
    width: 16px;
    margin-right: ${getSpacing('s02')};
  }
`;
const CloseButton = styled.button.withConfig({
    shouldForwardProp: (prop, isValidProp) => prop !== 'showClose' &&
        prop !== 'isLoading' &&
        isValidProp(prop),
}) `
  border: none;
  width: 21px;
  height: 21px;
  margin-left: ${getSpacing('s01')};
  padding: ${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: ${getColorAlias('interactiveSecondary')};

    &:hover {
      scale: 1.1;
    }
  }

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

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

export { Chip, CloseButton, FlexDiv, Ghost, IconWrapper, Outlined, Primary, SpinnerWrapper };
