import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style/css'; // ============================== Mixins ==============================

function segmentedDisabledItem(cls, token) {
  return _defineProperty({}, "".concat(cls, ", ").concat(cls, ":hover, ").concat(cls, ":focus"), {
    color: token.colorTextDisabled,
    cursor: 'not-allowed'
  });
}

function getSegmentedItemSelectedStyle(token) {
  return {
    backgroundColor: token.bgColorSelected,
    borderRadius: token.controlRadius,
    boxShadow: token.boxShadowSegmentedSelectedItem
  };
}

var segmentedTextEllipsisCss = {
  overflow: 'hidden',
  // handle text ellipsis
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  wordBreak: 'keep-all'
}; // ============================== Styles ==============================

var genSegmentedStyle = function genSegmentedStyle(token) {
  var _extends2, _extends3;

  var componentCls = token.componentCls;
  return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), (_extends2 = {
    display: 'inline-block',
    padding: token.segmentedContainerPadding,
    color: token.labelColor,
    backgroundColor: token.bgColor,
    borderRadius: token.radiusBase,
    transition: "all ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut)
  }, _defineProperty(_extends2, "".concat(componentCls, "-group"), {
    position: 'relative',
    display: 'flex',
    alignItems: 'stretch',
    justifyItems: 'flex-start',
    width: '100%'
  }), _defineProperty(_extends2, '&&-rtl', {
    direction: 'rtl'
  }), _defineProperty(_extends2, "&:not(".concat(componentCls, "-disabled)"), {
    '&:hover, &:focus': {
      backgroundColor: token.bgColorHover
    }
  }), _defineProperty(_extends2, '&&-block', {
    display: 'flex'
  }), _defineProperty(_extends2, "&&-block ".concat(componentCls, "-item"), {
    flex: 1,
    minWidth: 0
  }), _defineProperty(_extends2, "".concat(componentCls, "-item"), {
    position: 'relative',
    textAlign: 'center',
    cursor: 'pointer',
    transition: "color ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut),
    '&-selected': _extends(_extends({}, getSegmentedItemSelectedStyle(token)), {
      color: token.labelColorHover
    }),
    '&:hover, &:focus': {
      color: token.labelColorHover
    },
    '&-label': _extends({
      minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
      lineHeight: "".concat(token.controlHeight - token.segmentedContainerPadding * 2, "px"),
      padding: "0 ".concat(token.segmentedPaddingHorizontal, "px")
    }, segmentedTextEllipsisCss),
    // syntactic sugar to add `icon` for Segmented Item
    '&-icon + *': {
      marginInlineEnd: token.marginSM / 2
    },
    '&-input': {
      position: 'absolute',
      insetBlockStart: 0,
      insetInlineStart: 0,
      width: 0,
      height: 0,
      opacity: 0,
      pointerEvents: 'none'
    }
  }), _defineProperty(_extends2, "&&-lg ".concat(componentCls, "-item-label"), {
    minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
    lineHeight: "".concat(token.controlHeightLG - token.segmentedContainerPadding * 2, "px"),
    padding: "0 ".concat(token.segmentedPaddingHorizontal, "px"),
    fontSize: token.fontSizeLG
  }), _defineProperty(_extends2, "&&-sm ".concat(componentCls, "-item-label"), {
    minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
    lineHeight: "".concat(token.controlHeightSM - token.segmentedContainerPadding * 2, "px"),
    padding: "0 ".concat(token.segmentedPaddingHorizontalSM, "px")
  }), _extends2)), segmentedDisabledItem("&-disabled ".concat(componentCls, "-item"), token)), segmentedDisabledItem("".concat(componentCls, "-item-disabled"), token)), (_extends3 = {}, _defineProperty(_extends3, "".concat(componentCls, "-thumb"), _extends(_extends({}, getSegmentedItemSelectedStyle(token)), {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    width: 0,
    height: '100%',
    padding: "".concat(token.paddingXXS, "px 0")
  })), _defineProperty(_extends3, "".concat(componentCls, "-thumb-motion-appear-active"), {
    transition: "transform ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut, ", width ").concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut),
    willChange: 'transform, width'
  }), _extends3)));
}; // ============================== Export ==============================


export default genComponentStyleHook('Segmented', function (token) {
  var lineWidthBold = token.lineWidthBold,
      controlLineWidth = token.controlLineWidth,
      colorTextLabel = token.colorTextLabel,
      colorText = token.colorText,
      colorFillSecondary = token.colorFillSecondary,
      colorFill = token.colorFill,
      colorBgContainer = token.colorBgContainer;
  var segmentedToken = mergeToken(token, {
    segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
    segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
    segmentedContainerPadding: lineWidthBold,
    labelColor: colorTextLabel,
    labelColorHover: colorText,
    bgColor: colorFillSecondary,
    bgColorHover: colorFill,
    bgColorSelected: colorBgContainer
  });
  return [genSegmentedStyle(segmentedToken)];
});