import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genPresetColor, resetComponent } from '../../style';
import { capitalize } from '../../_util/util';
import { AggregationColor } from '../../color-picker/color';
import { Color as VcColor } from '../../vc-color-picker/color';
const isBright = (value, bgColorToken) => {
  const {
    r,
    g,
    b,
    a
  } = value.toRgb();
  const hsv = new VcColor(value.toRgbString()).onBackground(bgColorToken).toHsv();
  if (a <= 0.5) {
    // Adapted to dark mode
    return hsv.v > 0.5;
  }
  return r * 0.299 + g * 0.587 + b * 0.114 > 192;
};
const genTagStatusStyle = (token, status, cssVariableType) => {
  const capitalizedCssVariableType = capitalize(cssVariableType);
  return {
    [`${token.componentCls}${token.componentCls}-${status}:not(${token.componentCls}-disabled)`]: {
      [`&${token.componentCls}-outlined`]: {
        backgroundColor: token[`color${capitalizedCssVariableType}Bg`],
        borderColor: token[`color${capitalizedCssVariableType}Border`],
        color: token[`color${cssVariableType}`]
      },
      [`&${token.componentCls}-solid`]: {
        backgroundColor: token[`color${cssVariableType}`],
        borderColor: token[`color${cssVariableType}`]
      },
      [`&${token.componentCls}-filled`]: {
        backgroundColor: token[`color${capitalizedCssVariableType}Bg`],
        color: token[`color${cssVariableType}`]
      }
    }
  };
};
const genPresetStyle = token => genPresetColor(token, (colorKey, {
  textColor,
  lightBorderColor,
  lightColor,
  darkColor
}) => ({
  [`${token.componentCls}${token.componentCls}-${colorKey}:not(${token.componentCls}-disabled)`]: {
    [`&${token.componentCls}-outlined`]: {
      backgroundColor: lightColor,
      borderColor: lightBorderColor,
      color: textColor
    },
    [`&${token.componentCls}-solid`]: {
      backgroundColor: darkColor,
      borderColor: darkColor,
      color: token.colorTextLightSolid
    },
    [`&${token.componentCls}-filled`]: {
      backgroundColor: lightColor,
      color: textColor
    }
  }
}));
const genBaseStyle = token => {
  const {
    paddingXXS,
    lineWidth,
    tagPaddingHorizontal,
    componentCls
  } = token;
  const paddingInline = tagPaddingHorizontal - lineWidth;
  const iconMarginInline = paddingXXS - lineWidth;
  const solidTextColor = isBright(new AggregationColor(token.colorBgSolid), '#fff') ? '#000' : '#fff';
  return {
    // Result
    [componentCls]: _extends(_extends({}, resetComponent(token)), {
      display: 'inline-flex',
      height: 'auto',
      marginInlineEnd: token.marginXS,
      paddingInline,
      fontSize: token.tagFontSize,
      lineHeight: `${token.tagLineHeight}px`,
      whiteSpace: 'nowrap',
      background: token.tagDefaultBg,
      border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
      borderRadius: token.borderRadiusSM,
      opacity: 1,
      transition: `all ${token.motionDurationMid}`,
      textAlign: 'start',
      // RTL
      [`&${componentCls}-rtl`]: {
        direction: 'rtl'
      },
      '&, a, a:hover': {
        color: token.tagDefaultColor
      },
      [`${componentCls}-close-icon`]: {
        marginInlineStart: iconMarginInline,
        color: token.colorTextDescription,
        fontSize: token.tagIconSize,
        cursor: 'pointer',
        transition: `all ${token.motionDurationMid}`,
        '&:hover': {
          color: token.colorTextHeading
        }
      },
      [`&-checkable`]: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        cursor: 'pointer',
        [`&:not(${componentCls}-checkable-checked):hover`]: {
          color: token.colorPrimary,
          backgroundColor: token.colorFillSecondary
        },
        '&:active, &-checked': {
          color: token.colorTextLightSolid
        },
        '&-checked': {
          backgroundColor: token.colorPrimary,
          '&:hover': {
            backgroundColor: token.colorPrimaryHover
          }
        },
        '&:active': {
          backgroundColor: token.colorPrimaryActive
        },
        '&-disabled': {
          cursor: 'not-allowed',
          [`&:not(${componentCls}-checkable-checked)`]: {
            color: token.colorTextDisabled,
            '&:hover': {
              backgroundColor: 'transparent'
            }
          },
          [`&${componentCls}-checkable-checked`]: {
            color: token.colorTextDisabled,
            backgroundColor: token.colorBgContainerDisabled
          },
          '&:hover, &:active': {
            backgroundColor: token.colorBgContainerDisabled,
            color: token.colorTextDisabled
          },
          [`&:not(${componentCls}-checkable-checked):hover`]: {
            color: token.colorTextDisabled
          }
        },
        '&-group': {
          display: 'flex',
          flexWrap: 'wrap',
          gap: token.paddingXS
        }
      },
      [`&-hidden`]: {
        display: 'none'
      },
      // To ensure that a space will be placed between character and `Icon`.
      [`> ${token.iconCls} + span, > span + ${token.iconCls}`]: {
        marginInlineStart: paddingInline
      }
    }),
    [`&${token.componentCls}-solid`]: {
      borderColor: 'transparent',
      color: token.colorTextLightSolid,
      backgroundColor: token.colorBgSolid,
      [`&${componentCls}-default`]: {
        color: solidTextColor
      }
    },
    [`${componentCls}-filled`]: {
      borderColor: 'transparent',
      backgroundColor: token.tagBorderlessBg
    },
    [`&${componentCls}-disabled`]: {
      color: token.colorTextDisabled,
      cursor: 'not-allowed',
      backgroundColor: token.colorBgContainerDisabled,
      a: {
        cursor: 'not-allowed',
        pointerEvents: 'none',
        color: token.colorTextDisabled,
        '&:hover': {
          color: token.colorTextDisabled
        }
      },
      'a&': {
        '&:hover, &:active': {
          color: token.colorTextDisabled
        }
      },
      [`&${componentCls}-outlined`]: {
        borderColor: token.colorBorder
      },
      [`&${componentCls}-solid, &${componentCls}-filled`]: {
        color: token.colorTextDisabled,
        [`${componentCls}-close-icon`]: {
          color: token.colorTextDisabled
        }
      },
      [`${componentCls}-close-icon`]: {
        cursor: 'not-allowed',
        color: token.colorTextDisabled,
        '&:hover': {
          color: token.colorTextDisabled
        }
      }
    }
  };
};
// ============================== Export ==============================
export default genComponentStyleHook('Tag', token => {
  const {
    fontSize,
    lineHeight,
    lineWidth,
    fontSizeIcon
  } = token;
  const tagHeight = Math.round(fontSize * lineHeight);
  const tagFontSize = token.fontSizeSM;
  const tagLineHeight = tagHeight - lineWidth * 2;
  const tagDefaultBg = token.colorFillAlter;
  const tagDefaultColor = token.colorText;
  const tagToken = mergeToken(token, {
    tagFontSize,
    tagLineHeight,
    tagDefaultBg,
    tagDefaultColor,
    tagIconSize: fontSizeIcon - 2 * lineWidth,
    tagPaddingHorizontal: 8,
    tagBorderlessBg: token.colorFillTertiary
  });
  return [genBaseStyle(tagToken), genPresetStyle(tagToken), genTagStatusStyle(tagToken, 'success', 'Success'), genTagStatusStyle(tagToken, 'processing', 'Info'), genTagStatusStyle(tagToken, 'error', 'Error'), genTagStatusStyle(tagToken, 'warning', 'Warning')];
});