import _extends from "@babel/runtime/helpers/esm/extends";
import '../../_util/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import { genModalMaskStyle } from '../../modal/style';
import { initZoomMotion, initFadeMotion } from '../../style/motion';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { inkFlow1, inkFlow2, inkFlow3, progressActive } from './progressAnimation';
export const genBoxStyle = position => ({
  position: position || 'absolute',
  inset: 0
});
export const genImageCoverStyle = token => {
  const {
    componentCls,
    motionDurationSlow,
    colorTextLightSolid
  } = token;
  return {
    [componentCls]: {
      [`${componentCls}-cover`]: {
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: colorTextLightSolid,
        background: new TinyColor('#000').setAlpha(0.3).toRgbString(),
        cursor: 'pointer',
        opacity: 0,
        transition: `opacity ${motionDurationSlow}`
      },
      '&:hover': {
        [`${componentCls}-cover`]: {
          opacity: 1
        }
      },
      [`${componentCls}-cover-top`]: {
        inset: '0 0 auto 0',
        justifyContent: 'center'
      },
      [`${componentCls}-cover-bottom`]: {
        inset: 'auto 0 0 0',
        justifyContent: 'center'
      }
    }
  };
};
export const genPreviewOperationsStyle = token => {
  const {
    previewCls,
    modalMaskBg,
    paddingSM,
    marginXL,
    margin,
    paddingLG,
    previewOperationColorDisabled,
    previewOperationHoverColor,
    motionDurationSlow,
    iconCls,
    colorTextLightSolid
  } = token;
  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
  const operationBgHover = operationBg.clone().setAlpha(0.2);
  return {
    [`${previewCls}-footer`]: {
      position: 'absolute',
      bottom: marginXL,
      zIndex: 1,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      color: token.previewOperationColor,
      gap: margin,
      left: '50%',
      transform: 'translatex(-50%)'
    },
    [`${previewCls}-progress`]: {
      marginBottom: margin
    },
    [`${previewCls}-close`]: {
      position: 'absolute',
      zIndex: 1,
      top: token.marginSM,
      right: {
        _skip_check_: true,
        value: token.marginSM
      },
      display: 'flex',
      color: colorTextLightSolid,
      backgroundColor: operationBg.toRgbString(),
      borderRadius: '50%',
      padding: paddingSM,
      outline: 0,
      border: 0,
      cursor: 'pointer',
      transition: `all ${motionDurationSlow}`,
      '&:hover': {
        backgroundColor: operationBgHover.toRgbString()
      },
      [`& > ${iconCls}`]: {
        fontSize: token.previewOperationSize
      }
    },
    [`${previewCls}-operations`]: {
      display: 'flex',
      alignItems: 'center',
      padding: `0 ${paddingLG}px`,
      backgroundColor: operationBg.toRgbString(),
      borderRadius: 100,
      gap: paddingSM,
      '&-operation': {
        display: 'flex',
        padding: paddingSM,
        cursor: 'pointer',
        transition: `all ${motionDurationSlow}`,
        userSelect: 'none',
        [`&:not(${previewCls}-operations-operation-disabled):hover > ${iconCls}`]: {
          color: previewOperationHoverColor
        },
        '&-disabled': {
          color: previewOperationColorDisabled,
          cursor: 'not-allowed'
        },
        [`& > ${iconCls}`]: {
          fontSize: token.previewOperationSize
        }
      }
    }
  };
};
export const genPreviewSwitchStyle = token => {
  const {
    modalMaskBg,
    iconCls,
    previewOperationColorDisabled,
    previewCls,
    zIndexPopup,
    motionDurationSlow
  } = token;
  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
  const operationBgHover = operationBg.clone().setAlpha(0.2);
  return {
    [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
      position: 'fixed',
      insetBlockStart: '50%',
      zIndex: zIndexPopup + 1,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: token.imagePreviewSwitchSize,
      height: token.imagePreviewSwitchSize,
      marginTop: -token.imagePreviewSwitchSize / 2,
      color: token.previewOperationColor,
      background: operationBg.toRgbString(),
      borderRadius: '50%',
      transform: `translateY(-50%)`,
      cursor: 'pointer',
      transition: `all ${motionDurationSlow}`,
      userSelect: 'none',
      '&:hover': {
        background: operationBgHover.toRgbString()
      },
      [`&-disabled`]: {
        '&, &:hover': {
          color: previewOperationColorDisabled,
          background: 'transparent',
          cursor: 'not-allowed',
          [`> ${iconCls}`]: {
            cursor: 'not-allowed'
          }
        }
      },
      [`> ${iconCls}`]: {
        fontSize: token.previewOperationSize
      }
    },
    [`${previewCls}-switch-left`]: {
      insetInlineStart: token.marginSM
    },
    [`${previewCls}-switch-right`]: {
      insetInlineEnd: token.marginSM
    }
  };
};
export const genImagePreviewStyle = token => {
  const {
    motionEaseOut,
    previewCls,
    motionDurationSlow,
    componentCls
  } = token;
  return [{
    [`${componentCls}-preview-root`]: {
      textAlign: 'center',
      inset: 0,
      position: 'fixed',
      userSelect: 'none',
      zIndex: token.zIndexPopup,
      [previewCls]: {
        height: '100%',
        textAlign: 'center',
        pointerEvents: 'none'
      },
      [`div${previewCls}-mask`]: {
        zIndex: 'unset'
      },
      [`${previewCls}-body`]: _extends(_extends({}, genBoxStyle()), {
        overflow: 'hidden'
      }),
      [`${previewCls}-img`]: {
        maxWidth: '100%',
        maxHeight: '70%',
        verticalAlign: 'middle',
        transform: 'scale3d(1, 1, 1)',
        cursor: 'grab',
        transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
        userSelect: 'none',
        '&-wrapper': _extends(_extends({}, genBoxStyle()), {
          transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
          // https://github.com/ant-design/ant-design/issues/39913
          // TailwindCSS will reset img default style.
          // Let's set back.
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          '& > *': {
            pointerEvents: 'auto'
          },
          '&::before': {
            display: 'inline-block',
            width: 1,
            height: '50%',
            marginInlineEnd: -1,
            content: '""'
          }
        })
      },
      [`${previewCls}-moving`]: {
        [`${previewCls}-preview-img`]: {
          cursor: 'grabbing',
          '&-wrapper': {
            transitionDuration: '0s'
          }
        }
      }
    }
  },
  // Override
  {
    [`${componentCls}-preview-root`]: {
      [`${previewCls}-wrap`]: {
        // zIndex: token.zIndexPopup,
      }
    }
  },
  // Preview operations & switch
  {
    [`${componentCls}-preview-operations-wrapper`]: {
      position: 'fixed',
      zIndex: token.zIndexPopup + 1
    },
    '&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)]
  }];
};
const genImageStyle = token => {
  const {
    componentCls
  } = token;
  return {
    // ============================== image ==============================
    [componentCls]: {
      position: 'relative',
      display: 'inline-block',
      [`${componentCls}-img`]: {
        width: '100%',
        height: 'auto',
        verticalAlign: 'middle'
      },
      [`${componentCls}-img-placeholder`]: {
        backgroundColor: token.colorBgContainerDisabled,
        backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '30%'
      },
      [`${componentCls}-mask:hover`]: {
        opacity: 1
      },
      [`${componentCls}-placeholder`]: _extends({}, genBoxStyle())
    }
  };
};
const genPreviewMotion = token => {
  const {
    previewCls
  } = token;
  return {
    [`${previewCls}-root`]: initZoomMotion(token, 'zoom'),
    [`&`]: initFadeMotion(token, true)
  };
};
const genImageProgressStyle = token => {
  const {
    motionEaseInOut,
    componentCls,
    progressAnimationDuration,
    motionDurationMid
  } = token;
  // Common ink layer base styles
  const inkBaseStyle = {
    position: 'absolute',
    width: '150%',
    height: '150%',
    left: '-25%',
    top: '-25%',
    animationTimingFunction: motionEaseInOut,
    animationIterationCount: 'infinite',
    pointerEvents: 'none',
    willChange: 'transform, opacity'
  };
  return {
    [`${componentCls}-progress-wrapper`]: {
      position: 'relative',
      display: 'inline-block',
      overflow: 'hidden',
      borderRadius: 'inherit',
      backgroundColor: token.colorBgBase,
      backdropFilter: 'blur(8px)',
      // Ink group 1: Ink 1 (main) + Ink 2 (::before) + Ink 3 (::after)
      [`${componentCls}-progress-ink-1`]: _extends(_extends({}, inkBaseStyle), {
        // Ink 1 - Top left blue cloud
        background: `radial-gradient(ellipse 65% 55% at 25% 30%, rgba(100, 180, 255, 0.98) 0%, transparent 55%)`,
        animationName: inkFlow1,
        animationDuration: progressAnimationDuration,
        filter: 'blur(40px)',
        // Ink 2 - Center right lavender
        '&::before': _extends(_extends({
          content: '""'
        }, inkBaseStyle), {
          background: `radial-gradient(ellipse 60% 65% at 75% 45%, rgba(180, 140, 255, 0.95) 0%, transparent 50%)`,
          animationName: inkFlow2,
          animationDuration: `calc(${progressAnimationDuration} + 2s)`,
          animationDelay: '-1s',
          filter: 'blur(45px)'
        }),
        // Ink 3 - Bottom center cyan
        '&::after': _extends(_extends({
          content: '""'
        }, inkBaseStyle), {
          background: `radial-gradient(ellipse 55% 50% at 50% 70%, rgba(100, 220, 220, 0.9) 0%, transparent 45%)`,
          animationName: inkFlow3,
          animationDuration: `calc(${progressAnimationDuration} + 0.5s)`,
          animationDelay: '-2s',
          filter: 'blur(38px)'
        })
      }),
      // Ink group 2: Ink 4 (main) + Ink 5 (::before)
      [`${componentCls}-progress-ink-2`]: _extends(_extends({}, inkBaseStyle), {
        // Ink 4 - Scattered pink blossom
        background: `radial-gradient(ellipse 45% 40% at 60% 20%, rgba(255, 150, 200, 0.88) 0%, transparent 45%)`,
        animationName: inkFlow3,
        animationDuration: `calc(${progressAnimationDuration} + 1.5s)`,
        animationDelay: '-3s',
        filter: 'blur(42px)',
        // Ink 5 - Soft periwinkle accent
        '&::before': _extends(_extends({
          content: '""'
        }, inkBaseStyle), {
          background: `radial-gradient(ellipse 50% 55% at 20% 75%, rgba(160, 190, 255, 0.88) 0%, transparent 50%)`,
          animationName: inkFlow1,
          animationDuration: `calc(${progressAnimationDuration} + 2.5s)`,
          animationDelay: '-2.5s',
          filter: 'blur(35px)'
        })
      }),
      // Progress content
      [`${componentCls}-progress-content`]: {
        position: 'absolute',
        top: '50%',
        left: 0,
        transform: 'translateY(-50%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '100%',
        paddingInline: token.paddingLG,
        textAlign: 'center',
        fontSize: token.fontSize,
        color: token.colorTextSecondary,
        zIndex: 1
      },
      // Progress rail (background container)
      [`${componentCls}-progress-rail`]: {
        width: '100%',
        height: 6,
        marginTop: token.marginSM,
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        borderRadius: token.borderRadiusXS,
        overflow: 'hidden',
        backdropFilter: 'blur(4px)',
        // Track (filled portion) using ::before
        '&::before': {
          content: '""',
          display: 'block',
          height: '100%',
          width: 'var(--progress-percent, 0%)',
          background: 'linear-gradient(90deg, rgba(120, 170, 255, 0.85) 0%, rgba(160, 150, 245, 0.85) 40%, rgba(130, 200, 220, 0.85) 60%, rgba(120, 170, 255, 0.85) 100%)',
          backgroundSize: '200% 100%',
          borderRadius: token.borderRadiusXS / 2,
          transition: `width ${motionDurationMid} ease`,
          animationName: progressActive,
          animationDuration: progressAnimationDuration,
          animationTimingFunction: 'linear',
          animationIterationCount: 'infinite'
        }
      },
      // Progress indicator (percent text)
      [`${componentCls}-progress-indicator`]: {
        marginTop: token.marginXS
      }
    }
  };
};
// ============================== Export ==============================
export default genComponentStyleHook('Image', token => {
  const previewCls = `${token.componentCls}-preview`;
  const imageToken = mergeToken(token, {
    previewCls,
    modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
    imagePreviewSwitchSize: token.controlHeightLG
  });
  return [genImageStyle(imageToken), genImageCoverStyle(imageToken), genImageProgressStyle(imageToken), genImagePreviewStyle(imageToken), genModalMaskStyle(mergeToken(imageToken, {
    componentCls: previewCls
  })), genPreviewMotion(imageToken)];
}, token => ({
  zIndexPopup: token.zIndexPopupBase + 80,
  previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.65).toRgbString(),
  previewOperationHoverColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.85).toRgbString(),
  previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid).setAlpha(0.25).toRgbString(),
  previewOperationSize: token.fontSizeIcon * 1.5,
  progressAnimationDuration: '3s'
}));