import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { genComponentStyleHook, mergeToken } from '../../theme';
import genStepsCustomIconStyle from './custom-icon';
import genStepsLabelPlacementStyle from './label-placement';
import genStepsNavStyle from './nav';
import genStepsProgressStyle from './progress';
import genStepsProgressDotStyle from './progress-dot';
import genStepsRTLStyle from './rtl';
import genStepsSmallStyle from './small';
import genStepsVerticalStyle from './vertical';
import { resetComponent } from '../../style/css';
var StepItemStatusEnum;

(function (StepItemStatusEnum) {
  StepItemStatusEnum["wait"] = "wait";
  StepItemStatusEnum["process"] = "process";
  StepItemStatusEnum["finish"] = "finish";
  StepItemStatusEnum["error"] = "error";
})(StepItemStatusEnum || (StepItemStatusEnum = {}));

var genStepsItemStatusStyle = function genStepsItemStatusStyle(status, token) {
  var _ref;

  var prefix = "".concat(token.componentCls, "-item");
  var iconColorKey = "".concat(status, "IconColor");
  var titleColorKey = "".concat(status, "TitleColor");
  var descriptionColorKey = "".concat(status, "DescriptionColor");
  var tailColorKey = "".concat(status, "TailColor");
  return _ref = {}, _defineProperty(_ref, "".concat(prefix, "-").concat(status, " ").concat(prefix, "-icon"), _defineProperty({
    backgroundColor: token.colorBgContainer,
    borderColor: token[iconColorKey]
  }, "> ".concat(token.componentCls, "-icon"), _defineProperty({
    color: token[iconColorKey]
  }, "".concat(token.componentCls, "-icon-dot"), {
    background: token[iconColorKey]
  }))), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-content > ").concat(prefix, "-title"), {
    color: token[titleColorKey],
    '&::after': {
      backgroundColor: token[tailColorKey]
    }
  }), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-content > ").concat(prefix, "-description"), {
    color: token[descriptionColorKey]
  }), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-tail::after"), {
    backgroundColor: token[tailColorKey]
  }), _ref;
};

var genStepsItemStyle = function genStepsItemStyle(token) {
  var _extends2, _extends3, _extends4;

  var componentCls = token.componentCls,
      motionDurationSlow = token.motionDurationSlow;
  var stepsItemCls = "".concat(componentCls, "-item"); // .ant-steps-item

  return _extends(_extends(_extends(_extends(_extends(_extends((_extends2 = {}, _defineProperty(_extends2, stepsItemCls, {
    position: 'relative',
    display: 'inline-block',
    flex: 1,
    overflow: 'hidden',
    verticalAlign: 'top',
    '&:last-child': _defineProperty({
      flex: 'none'
    }, "> ".concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-tail, > ").concat(stepsItemCls, "-container >  ").concat(stepsItemCls, "-content > ").concat(stepsItemCls, "-title::after"), {
      display: 'none'
    })
  }), _defineProperty(_extends2, "".concat(stepsItemCls, "-container"), {
    outline: 'none'
  }), _defineProperty(_extends2, "".concat(stepsItemCls, "-icon, ").concat(stepsItemCls, "-content"), {
    display: 'inline-block',
    verticalAlign: 'top'
  }), _defineProperty(_extends2, "".concat(stepsItemCls, "-icon"), _defineProperty({
    width: token.stepsIconSize,
    height: token.stepsIconSize,
    marginTop: 0,
    marginBottom: 0,
    marginInlineStart: 0,
    marginInlineEnd: token.marginXS,
    fontSize: token.stepsIconFontSize,
    fontFamily: token.fontFamily,
    lineHeight: "".concat(token.stepsIconSize, "px"),
    textAlign: 'center',
    border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorTextDisabled),
    borderRadius: token.stepsIconSize,
    transition: "background-color ".concat(motionDurationSlow, ", border-color ").concat(motionDurationSlow)
  }, "".concat(componentCls, "-icon"), {
    position: 'relative',
    top: token.stepsIconTop,
    color: token.colorPrimary,
    lineHeight: 1
  })), _defineProperty(_extends2, "".concat(stepsItemCls, "-tail"), {
    position: 'absolute',
    top: token.marginSM,
    insetInlineStart: 0,
    width: '100%',
    '&::after': {
      display: 'inline-block',
      width: '100%',
      height: token.lineWidth,
      background: token.colorSplit,
      borderRadius: token.lineWidth,
      transition: "background ".concat(motionDurationSlow),
      content: '""'
    }
  }), _defineProperty(_extends2, "".concat(stepsItemCls, "-title"), {
    position: 'relative',
    display: 'inline-block',
    paddingInlineEnd: token.padding,
    color: token.colorText,
    fontSize: token.fontSizeLG,
    lineHeight: "".concat(token.stepsTitleLineHeight, "px"),
    '&::after': {
      position: 'absolute',
      top: token.stepsTitleLineHeight / 2,
      insetInlineStart: '100%',
      display: 'block',
      width: 9999,
      height: token.lineWidth,
      background: token.processTailColor,
      content: '""'
    }
  }), _defineProperty(_extends2, "".concat(stepsItemCls, "-subtitle"), {
    display: 'inline',
    marginInlineStart: token.marginXS,
    color: token.colorTextSecondary,
    fontWeight: 'normal',
    fontSize: token.fontSizeBase
  }), _defineProperty(_extends2, "".concat(stepsItemCls, "-description"), {
    color: token.colorTextSecondary,
    fontSize: token.fontSizeBase
  }), _extends2), genStepsItemStatusStyle(StepItemStatusEnum.wait, token)), genStepsItemStatusStyle(StepItemStatusEnum.process, token)), (_extends3 = {}, _defineProperty(_extends3, "".concat(stepsItemCls, "-process > ").concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-icon"), _defineProperty({
    background: token.processIconColor
  }, "".concat(componentCls, "-icon"), {
    color: token.processIconTextColor
  })), _defineProperty(_extends3, "".concat(stepsItemCls, "-process > ").concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-title"), {
    fontWeight: token.fontWeightStrong
  }), _extends3)), genStepsItemStatusStyle(StepItemStatusEnum.finish, token)), genStepsItemStatusStyle(StepItemStatusEnum.error, token)), (_extends4 = {}, _defineProperty(_extends4, "".concat(stepsItemCls).concat(componentCls, "-next-error > ").concat(componentCls, "-item-title::after"), {
    background: token.colorError
  }), _defineProperty(_extends4, "".concat(stepsItemCls, "-disabled"), {
    cursor: 'not-allowed'
  }), _extends4));
}; // ============================= Clickable ===========================


var genStepsClickableStyle = function genStepsClickableStyle(token) {
  var _$concat5, _not$concat2, _$concat8, _ref2;

  var componentCls = token.componentCls,
      motionDurationSlow = token.motionDurationSlow;
  return _ref2 = {}, _defineProperty(_ref2, "& ".concat(componentCls, "-item"), _defineProperty({}, "&:not(".concat(componentCls, "-item-active)"), (_not$concat2 = {}, _defineProperty(_not$concat2, "& > ".concat(componentCls, "-item-container[role='button']"), (_$concat5 = {
    cursor: 'pointer'
  }, _defineProperty(_$concat5, "".concat(componentCls, "-item"), _defineProperty({}, "&-title, &-subtitle, &-description, &-icon ".concat(componentCls, "-icon"), {
    transition: "color ".concat(motionDurationSlow)
  })), _defineProperty(_$concat5, '&:hover', _defineProperty({}, "".concat(componentCls, "-item"), _defineProperty({}, "&-title, &-subtitle, &-description", {
    color: token.colorPrimary
  }))), _$concat5)), _defineProperty(_not$concat2, "&:not(".concat(componentCls, "-item-process)"), _defineProperty({}, "& > ".concat(componentCls, "-item-container[role='button']:hover"), _defineProperty({}, "".concat(componentCls, "-item"), {
    '&-icon': _defineProperty({
      borderColor: token.colorPrimary
    }, "".concat(componentCls, "-icon"), {
      color: token.colorPrimary
    })
  }))), _not$concat2))), _defineProperty(_ref2, "&".concat(componentCls, "-horizontal:not(").concat(componentCls, "-label-vertical)"), _defineProperty({}, "".concat(componentCls, "-item"), (_$concat8 = {
    paddingInlineStart: token.padding,
    whiteSpace: 'nowrap',
    '&:first-child': {
      paddingInlineStart: 0
    }
  }, _defineProperty(_$concat8, "&:last-child ".concat(componentCls, "-item-title"), {
    paddingInlineEnd: 0
  }), _defineProperty(_$concat8, '&-tail', {
    display: 'none'
  }), _defineProperty(_$concat8, '&-description', {
    maxWidth: token.descriptionWidth,
    whiteSpace: 'normal'
  }), _$concat8))), _ref2;
};

var genStepsStyle = function genStepsStyle(token) {
  var componentCls = token.componentCls; // .ant-steps

  return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), {
    display: 'flex',
    width: '100%',
    fontSize: 0,
    textAlign: 'initial'
  }), genStepsItemStyle(token)), genStepsClickableStyle(token)), genStepsCustomIconStyle(token)), genStepsSmallStyle(token)), genStepsVerticalStyle(token)), genStepsLabelPlacementStyle(token)), genStepsProgressDotStyle(token)), genStepsNavStyle(token)), genStepsRTLStyle(token)), genStepsProgressStyle(token)));
}; // ============================== Export ==============================


export default genComponentStyleHook('Steps', function (token) {
  var stepsIconSize = token.controlHeight;
  var processTailColor = token.colorSplit;
  var processIconColor = token.colorPrimary;
  var stepsToken = mergeToken(token, {
    // Steps variable default.css
    processTailColor: processTailColor,
    stepsNavArrowColor: token.colorTextDisabled,
    stepsIconSize: stepsIconSize,
    stepsIconCustomSize: stepsIconSize,
    stepsIconCustomTop: 0,
    stepsIconCustomFontSize: token.fontSizeHeading3,
    stepsIconTop: -0.5,
    stepsIconFontSize: token.fontSizeLG,
    stepsTitleLineHeight: token.controlHeight,
    stepsSmallIconSize: token.fontSizeHeading3,
    stepsDotSize: token.controlHeight / 4,
    stepsCurrentDotSize: token.controlHeightLG / 4,
    stepsNavContentMaxWidth: 'auto',
    // Steps component less variable
    processIconColor: processIconColor,
    processTitleColor: token.colorText,
    processDescriptionColor: token.colorText,
    processIconTextColor: token.colorTextLightSolid,
    waitIconColor: token.colorTextDisabled,
    waitTitleColor: token.colorTextSecondary,
    waitDescriptionColor: token.colorTextSecondary,
    waitTailColor: processTailColor,
    finishIconColor: processIconColor,
    finishTitleColor: token.colorText,
    finishDescriptionColor: token.colorTextSecondary,
    finishTailColor: token.colorPrimary,
    errorIconColor: token.colorError,
    errorTitleColor: token.colorError,
    errorDescriptionColor: token.colorError,
    errorTailColor: processTailColor,
    stepsNavActiveColor: token.colorPrimary,
    stepsProgressSize: token.controlHeightLG
  });
  return [genStepsStyle(stepsToken)];
}, {
  descriptionWidth: 140
});