"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledTag = exports.HiddenInput = exports.Wrapper = void 0;
const Badge_1 = require("@mui/material/Badge");
const styled_1 = require("../styled");
const Tag_1 = require("../Tag");
const getHoverBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
    if (disabled) {
        return theme.palette.components.disabled;
    }
    if (isChecked) {
        return theme.palette.grey[600];
    }
    if (variant === 'text') {
        return theme.palette.grey[200];
    }
    const hoverBgColors = {
        light: {
            primary: theme.palette.primary[200],
            error: theme.palette.red[200],
            success: theme.palette.green[200],
            warning: theme.palette.yellow[200],
            grey: theme.palette.grey[200],
            default: 'transparent',
        },
        contained: {
            primary: theme.palette.primary[600],
            error: theme.palette.red[600],
            success: theme.palette.green[600],
            warning: theme.palette.yellow[600],
            grey: theme.palette.grey[200],
            default: 'transparent',
        },
    };
    if (variant && color) {
        return hoverBgColors[variant][color];
    }
    return theme.palette.background.element;
};
const getActiveBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
    if (disabled) {
        return theme.palette.components.disabled;
    }
    if (isChecked) {
        return theme.palette.grey[700];
    }
    if (variant === 'text') {
        return theme.palette.grey[300];
    }
    const activeBgColor = {
        contained: {
            primary: theme.palette.primary[700],
            error: theme.palette.red[700],
            success: theme.palette.green[700],
            warning: theme.palette.yellow[700],
            grey: theme.palette.grey[400],
            default: theme.palette.grey[200],
        },
        light: {
            primary: theme.palette.primary[300],
            error: theme.palette.red[300],
            success: theme.palette.green[300],
            warning: theme.palette.yellow[300],
            grey: theme.palette.grey[300],
            default: theme.palette.grey[200],
        },
    };
    if (variant && color) {
        return activeBgColor[variant][color];
    }
    return activeBgColor.light.default;
};
const getColor = ({ theme, isChecked, disabled, }) => {
    if (disabled) {
        return theme.palette.grey[500];
    }
    if (isChecked) {
        return theme.palette.primary.contrastText;
    }
    return 'inherit';
};
const getBorder = ({ isChecked, variant, color, theme, disabled, tagState = 'default', }) => {
    if (variant === 'text' || color !== 'default') {
        return 'none';
    }
    if (isChecked || (disabled && variant === 'light')) {
        return '1px solid transparent';
    }
    if (tagState === 'default') {
        `1px solid ${theme.palette.grey[600]}`;
    }
    return `1px solid ${theme.palette.components.border.default}`;
};
exports.Wrapper = styled_1.styled.label `
  width: fit-content;
`;
exports.HiddenInput = styled_1.styled.input `
  display: none;
`;
exports.StyledTag = (0, styled_1.styled)(Tag_1.Tag, {
    shouldForwardProp: (prop) => !['$isChecked'].includes(prop),
}) `
  cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
  user-select: none;

  background-color: ${({ theme, color, variant }) => (variant === 'light' && color === 'grey') && theme.palette.grey[200]};
  ${({ $isChecked, disabled, theme }) => $isChecked &&
    `
    background-color: ${disabled ? theme.palette.grey[200] : theme.palette.grey[900]};
  `}
  border: ${({ theme, variant, $isChecked, color, disabled }) => getBorder({ theme, variant, isChecked: $isChecked, color, disabled })};

  .${Tag_1.tagClassnames.label} {
    color: ${({ theme, disabled, $isChecked }) => getColor({ theme, isChecked: $isChecked, disabled })};
  }

  .${Tag_1.tagClassnames.badge} .${Badge_1.badgeClasses.badge} {
    cursor: pointer;
  }

  &:hover {
    background-color: ${({ theme, color, variant, disabled, $isChecked }) => getHoverBgColor({
    theme,
    color,
    variant,
    disabled,
    isChecked: $isChecked,
})};
    border: ${({ theme, variant, $isChecked, color }) => getBorder({
    theme,
    variant,
    isChecked: $isChecked,
    tagState: 'hover',
    color,
})};
  }

  &:active {
    background-color: ${({ theme, color, variant, disabled, $isChecked }) => getActiveBgColor({
    theme,
    variant,
    color,
    disabled,
    isChecked: $isChecked,
})};
    border: ${({ theme, variant, $isChecked, color }) => getBorder({
    theme,
    variant,
    isChecked: $isChecked,
    tagState: 'active',
    color,
})};
  }
`;
