import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { TinyColor } from '@ctrl/tinycolor';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
// =============================== Base ===============================
var genBaseStyle = function genBaseStyle(token) {
  var _$concat3, _$concat4, _$concat6, _extends2, _ref;
  var componentCls = token.componentCls,
    lineHeight = token.lineHeight,
    padding = token.padding,
    paddingXS = token.paddingXS,
    borderRadius = token.borderRadius,
    borderRadiusXS = token.borderRadiusXS,
    colorPrimary = token.colorPrimary,
    colorText = token.colorText,
    colorFill = token.colorFill,
    sliderHeight = token.sliderHeight,
    sliderWidth = token.sliderWidth,
    boxShadow = token.boxShadow,
    tourZIndexPopup = token.tourZIndexPopup,
    fontSize = token.fontSize,
    colorBgContainer = token.colorBgContainer,
    fontWeightStrong = token.fontWeightStrong,
    marginXS = token.marginXS,
    colorTextLightSolid = token.colorTextLightSolid,
    tourBorderRadius = token.tourBorderRadius,
    colorWhite = token.colorWhite,
    colorBgTextHover = token.colorBgTextHover,
    tourCloseSize = token.tourCloseSize,
    motionDurationSlow = token.motionDurationSlow;
  return [(_ref = {}, _defineProperty(_ref, componentCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    color: colorText,
    position: 'absolute',
    zIndex: tourZIndexPopup,
    display: 'block',
    visibility: 'visible',
    fontSize: fontSize,
    lineHeight: lineHeight,
    width: 520,
    '--antd-arrow-background-color': colorBgContainer,
    '&-pure': {
      maxWidth: '100%',
      position: 'relative'
    }
  }, _defineProperty(_extends2, "&".concat(componentCls, "-hidden"), {
    display: 'none'
  }), _defineProperty(_extends2, "".concat(componentCls, "-content"), {
    position: 'relative'
  }), _defineProperty(_extends2, "".concat(componentCls, "-inner"), (_$concat4 = {
    textAlign: 'start',
    textDecoration: 'none',
    borderRadius: tourBorderRadius,
    boxShadow: boxShadow,
    position: 'relative',
    backgroundColor: colorBgContainer,
    border: 'none',
    backgroundClip: 'padding-box'
  }, _defineProperty(_$concat4, "".concat(componentCls, "-close"), {
    position: 'absolute',
    top: padding,
    insetInlineEnd: padding,
    color: token.colorIcon,
    outline: 'none',
    width: tourCloseSize,
    height: tourCloseSize,
    borderRadius: token.borderRadiusSM,
    transition: "background-color ".concat(token.motionDurationFast, ", color ").concat(token.motionDurationFast),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    '&:hover': {
      color: token.colorIconHover,
      backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent
    }
  }), _defineProperty(_$concat4, "".concat(componentCls, "-cover"), {
    textAlign: 'center',
    padding: "".concat(padding + tourCloseSize + paddingXS, "px ").concat(padding, "px 0"),
    img: {
      width: '100%'
    }
  }), _defineProperty(_$concat4, "".concat(componentCls, "-header"), _defineProperty({
    padding: "".concat(padding, "px ").concat(padding, "px ").concat(paddingXS, "px")
  }, "".concat(componentCls, "-title"), {
    lineHeight: lineHeight,
    fontSize: fontSize,
    fontWeight: fontWeightStrong
  })), _defineProperty(_$concat4, "".concat(componentCls, "-description"), {
    padding: "0 ".concat(padding, "px"),
    lineHeight: lineHeight,
    wordWrap: 'break-word'
  }), _defineProperty(_$concat4, "".concat(componentCls, "-footer"), (_$concat3 = {
    padding: "".concat(paddingXS, "px ").concat(padding, "px ").concat(padding, "px"),
    textAlign: 'end',
    borderRadius: "0 0 ".concat(borderRadiusXS, "px ").concat(borderRadiusXS, "px"),
    display: 'flex',
    justifyContent: 'space-between'
  }, _defineProperty(_$concat3, "".concat(componentCls, "-sliders"), _defineProperty({
    display: 'inline-block'
  }, "".concat(componentCls, "-slider"), {
    width: "".concat(sliderWidth, "px"),
    height: "".concat(sliderHeight, "px"),
    display: 'inline-block',
    borderRadius: '50%',
    background: colorFill,
    marginInlineEnd: sliderHeight,
    '&-active': {
      background: colorPrimary
    }
  })), _defineProperty(_$concat3, "".concat(componentCls, "-buttons button"), {
    marginInlineStart: marginXS
  }), _$concat3)), _$concat4)), _defineProperty(_extends2, "&".concat(componentCls, "-primary"), _defineProperty({
    '--antd-arrow-background-color': colorPrimary
  }, "".concat(componentCls, "-inner"), (_$concat6 = {
    color: colorTextLightSolid,
    textAlign: 'start',
    textDecoration: 'none',
    backgroundColor: colorPrimary,
    borderRadius: borderRadius,
    boxShadow: boxShadow
  }, _defineProperty(_$concat6, "".concat(componentCls, "-close"), {
    color: colorTextLightSolid
  }), _defineProperty(_$concat6, "".concat(componentCls, "-sliders"), _defineProperty({}, "".concat(componentCls, "-slider"), {
    background: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
    '&-active': {
      background: colorTextLightSolid
    }
  })), _defineProperty(_$concat6, "".concat(componentCls, "-prev-btn"), {
    color: colorTextLightSolid,
    borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
    '&:hover': {
      backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
      borderColor: 'transparent'
    }
  }), _defineProperty(_$concat6, "".concat(componentCls, "-next-btn"), {
    color: colorPrimary,
    borderColor: 'transparent',
    background: colorWhite,
    '&:hover': {
      background: new TinyColor(colorBgTextHover).onBackground(colorWhite).toRgbString()
    }
  }), _$concat6))), _extends2))), _defineProperty(_ref, "".concat(componentCls, "-mask"), _defineProperty({}, "".concat(componentCls, "-placeholder-animated"), {
    transition: "all ".concat(motionDurationSlow)
  })), _defineProperty(_ref, ["&-placement-left", "&-placement-leftTop", "&-placement-leftBottom", "&-placement-right", "&-placement-rightTop", "&-placement-rightBottom"].join(','), _defineProperty({}, "".concat(componentCls, "-inner"), {
    borderRadius: tourBorderRadius > MAX_VERTICAL_CONTENT_RADIUS ? MAX_VERTICAL_CONTENT_RADIUS : tourBorderRadius
  })), _ref),
  // ============================= Arrow ===========================
  getArrowStyle(token, {
    colorBg: 'var(--antd-arrow-background-color)',
    showArrowCls: '',
    contentRadius: tourBorderRadius,
    limitVerticalRadius: true
  })];
};
// ============================== Export ==============================
export default genComponentStyleHook('Tour', function (token) {
  var borderRadiusLG = token.borderRadiusLG,
    fontSize = token.fontSize,
    lineHeight = token.lineHeight;
  var TourToken = mergeToken(token, {
    tourZIndexPopup: token.zIndexPopupBase + 70,
    sliderWidth: 6,
    sliderHeight: 6,
    tourBorderRadius: borderRadiusLG,
    tourCloseSize: fontSize * lineHeight
  });
  return [genBaseStyle(TourToken)];
});