"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabelWrapper = exports.Wrapper = exports.StyledIconButton = exports.IconWrapper = exports.Label = exports.LabelContainer = exports.getDeleteIconColor = exports.getBadgeColor = void 0;
const Button_1 = require("@mui/material/Button");
const Typography_1 = require("@mui/material/Typography");
const Grid_1 = require("../Grid");
const IconButton_1 = require("../IconButton");
const SvgIcon_1 = require("../SvgIcon");
const styled_1 = require("../styled");
const constants_1 = require("./constants");
const HEIGHTS = {
    small: '20px',
    medium: '24px',
    large: '32px',
};
const getBadgeColor = ({ tagColor }) => {
    const colors = {
        primary: 'primary',
        error: 'error',
        grey: 'grey',
        success: 'success',
        warning: 'warning',
        default: 'white',
    };
    return colors[tagColor || 'default'];
};
exports.getBadgeColor = getBadgeColor;
const getBgColor = ({ theme, color, variant, disabled, }) => {
    if (variant === 'text') {
        return 'transparent';
    }
    if (disabled) {
        return theme.palette.components.disabled;
    }
    const backgroundColorVariants = {
        contained: {
            primary: theme.palette.primary.main,
            error: theme.palette.red[800],
            success: theme.palette.green[800],
            warning: theme.palette.yellow[800],
            grey: theme.palette.grey[300],
            default: theme.palette.background.default,
        },
        light: {
            primary: theme.palette.primary[100],
            error: theme.palette.red[100],
            success: theme.palette.green[100],
            warning: theme.palette.yellow[100],
            grey: theme.palette.grey[100],
            default: theme.palette.background.default,
        },
    };
    return backgroundColorVariants[variant][color];
};
const getColor = ({ theme, color, variant, disabled, }) => {
    if (disabled) {
        return theme.palette.text.disabled;
    }
    if (variant === 'text') {
        return theme.palette.grey[900];
    }
    const textColorVariants = {
        contained: {
            primary: theme.palette.primary.contrastText,
            error: theme.palette.error.contrastText,
            success: theme.palette.warning.contrastText,
            warning: theme.palette.success.contrastText,
            default: theme.palette.grey[900],
            grey: theme.palette.grey[900],
        },
        light: {
            primary: theme.palette.primary[900],
            error: theme.palette.red[900],
            success: theme.palette.green[900],
            warning: theme.palette.yellow[900],
            default: theme.palette.grey[900],
            grey: theme.palette.grey[900],
        },
    };
    return textColorVariants[variant][color];
};
const getDeleteIconBgColor = ({ color, variant, theme, }) => {
    if (variant === 'text') {
        return theme.palette.grey[300];
    }
    const hoverBackgroundColor = {
        contained: {
            primary: theme.palette.primary[600],
            success: theme.palette.success[600],
            warning: theme.palette.warning[600],
            error: theme.palette.error[600],
            grey: theme.palette.grey[500],
            default: theme.palette.grey[300],
        },
        light: {
            primary: theme.palette.primary[300],
            success: theme.palette.success[300],
            warning: theme.palette.warning[300],
            error: theme.palette.error[300],
            grey: theme.palette.grey[400],
            default: theme.palette.grey[300],
        },
    };
    return hoverBackgroundColor[variant][color];
};
const getDeleteIconColor = ({ variant, color, theme, }) => {
    if (variant === 'text' || color === 'default') {
        return theme.palette.grey[900];
    }
    if (variant === 'contained') {
        return color === 'grey'
            ? theme.palette.grey[900]
            : theme.palette.primary.contrastText;
    }
    return theme.palette[color][900];
};
exports.getDeleteIconColor = getDeleteIconColor;
exports.LabelContainer = (0, styled_1.styled)(Grid_1.Grid, {
    shouldForwardProp: (prop) => !['$variant'].includes(prop),
}) `
  grid-auto-flow: column;
  align-items: center;
  justify-content: flex-start;

  /* Разделитель между badge слева и label справа */
  & > .${constants_1.tagClassnames.badge} + .${Typography_1.typographyClasses.root}::before {
    content: '';

    display: ${({ $variant }) => $variant === 'text' ? 'none' : 'inline-block'};
    align-self: center;

    width: 2px;
    height: 2px;
    margin-top: ${({ $variant }) => ($variant === 'text' ? 0 : '0.15em')};
    margin-left: ${({ theme }) => theme.spacing(1)};

    background-color: currentColor;
    border-radius: 50%;
  }

  /* Разделитель между label слева и badge справа */
  & > .${Typography_1.typographyClasses.root} + .${constants_1.tagClassnames.badge}::before {
    content: '';

    display: ${({ $variant }) => $variant === 'text' ? 'none' : 'inline-block'};
    align-self: center;

    width: 2px;
    height: 2px;
    margin-top: ${({ $variant }) => ($variant === 'text' ? 0 : '0.15em')};
    margin-right: ${({ theme }) => theme.spacing(1)};

    background-color: currentColor;
    border-radius: 50%;
  }
`;
exports.Label = styled_1.styled.span `
  overflow: hidden;

  white-space: nowrap;
`;
exports.IconWrapper = styled_1.styled.span `
  width: 16px;
  height: 16px;
  margin-right: ${({ theme }) => theme.spacing(1)};
  
  .${SvgIcon_1.svgIconClassnames.root} {
    width: 16px;
    height: 16px;
  }
`;
exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton, {
    shouldForwardProp: (prop) => !['$color', '$variant', '$size'].includes(prop),
}) `
  width: ${({ $size }) => ($size === 'large' ? '24px' : '16px')};
  height: ${({ $size }) => ($size === 'large' ? '24px' : '16px')};
  margin-left: ${({ theme }) => theme.microSpacing(1)};

  color: ${({ theme, $color, $variant }) => (0, exports.getDeleteIconColor)({ theme, color: $color, variant: $variant })};

  background-color: transparent;
  border-radius: ${({ $size }) => ($size === 'large' ? '60px' : '30px')};

  &.${Button_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root} {
    font-size: 16px;
  }

  :hover {
    color: ${({ theme, $color, $variant }) => (0, exports.getDeleteIconColor)({ theme, color: $color, variant: $variant })};

    background-color: ${({ theme, $color, $variant }) => getDeleteIconBgColor({ theme, variant: $variant, color: $color })};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: ${({ $size }) => ($size === 'large' ? '24px' : '16px')};
    height: ${({ $size }) => ($size === 'large' ? '24px' : '16px')};
    padding: 0;

    &:hover {
      color: unset;

      background-color: unset;
    }

    &:active {
      color: ${({ theme, $color, $variant }) => (0, exports.getDeleteIconColor)({ theme, color: $color, variant: $variant })};

      background-color: ${({ theme, $color, $variant }) => getDeleteIconBgColor({ theme, variant: $variant, color: $color })};
    }
  }
`;
exports.Wrapper = styled_1.styled.div `
  pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};

  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  height: ${({ $size }) => HEIGHTS[$size]};
  padding-right: ${({ theme }) => theme.spacing(2)};
  padding-left: ${({ theme }) => theme.spacing(2)};
  
  color: ${({ theme, $variant, $color, $isDisabled }) => getColor({
    theme,
    variant: $variant,
    color: $color,
    disabled: $isDisabled,
})};

  background-color: ${({ theme, $variant, $color, $isDisabled }) => getBgColor({
    theme,
    color: $color,
    disabled: $isDisabled,
    variant: $variant,
})};
  border: ${({ theme, $variant, $color }) => $variant !== 'text' && $color === 'default'
    ? `1px solid ${theme.palette.components.border.default}`
    : 'none'};
  border-radius: ${({ theme }) => theme.shape.medium};
  
  &.${constants_1.tagClassnames.sizeLarge} {
    padding-right: ${({ theme }) => theme.spacing(3)};
    padding-left: ${({ theme }) => theme.spacing(3)};
  }
  
  &.${constants_1.tagClassnames.sizeLarge}.${constants_1.tagClassnames.variantTextLarge} {
    padding-right: 0;
    padding-left: 0;
  }
  
  &.${constants_1.tagClassnames.variantText} {
    padding-right: 0;
    padding-left: 0;
  }

  &.${constants_1.tagClassnames.removable}.${constants_1.tagClassnames.sizeLarge} {
    padding-right: ${({ theme }) => theme.spacing(1)};
  }
  
  &.${constants_1.tagClassnames.removable}:not(.${constants_1.tagClassnames.sizeLarge}):not(.${constants_1.tagClassnames.disabled}) {
    padding-right: ${({ theme }) => theme.microSpacing(1)};
  }
  
  &.${constants_1.tagClassnames.variantText}.${constants_1.tagClassnames.removable} {
    padding-right: 0;
  }
`;
exports.LabelWrapper = styled_1.styled.span `
  overflow: hidden;

  text-overflow: ellipsis;
`;
