"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _lockUnlock = require("../../lock-unlock");
var _hooks = require("./hooks");
var _typographyExample = _interopRequireDefault(require("./typography-example"));
var _highlightedColors = _interopRequireDefault(require("./highlighted-colors"));
var _previewWrapper = _interopRequireDefault(require("./preview-wrapper"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const firstFrameVariants = {
  start: {
    scale: 1,
    opacity: 1
  },
  hover: {
    scale: 0,
    opacity: 0
  }
};
const midFrameVariants = {
  hover: {
    opacity: 1
  },
  start: {
    opacity: 0.5
  }
};
const secondFrameVariants = {
  hover: {
    scale: 1,
    opacity: 1
  },
  start: {
    scale: 0,
    opacity: 0
  }
};
const PreviewStyles = ({
  label,
  isFocused,
  withHoverView,
  variation
}) => {
  const [fontWeight] = useGlobalStyle('typography.fontWeight');
  const [fontFamily = 'serif'] = useGlobalStyle('typography.fontFamily');
  const [headingFontFamily = fontFamily] = useGlobalStyle('elements.h1.typography.fontFamily');
  const [headingFontWeight = fontWeight] = useGlobalStyle('elements.h1.typography.fontWeight');
  const [textColor = 'black'] = useGlobalStyle('color.text');
  const [headingColor = textColor] = useGlobalStyle('elements.h1.color.text');
  const {
    paletteColors
  } = (0, _hooks.useStylesPreviewColors)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_previewWrapper.default, {
    label: label,
    isFocused: isFocused,
    withHoverView: withHoverView,
    children: [({
      ratio,
      key
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      variants: firstFrameVariants,
      style: {
        height: '100%',
        overflow: 'hidden'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        spacing: 10 * ratio,
        justify: "center",
        style: {
          height: '100%',
          overflow: 'hidden'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typographyExample.default, {
          fontSize: 65 * ratio,
          variation: variation
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
          spacing: 4 * ratio,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_highlightedColors.default, {
            normalizedColorSwatchSize: 32,
            ratio: ratio
          })
        })]
      })
    }, key), ({
      key
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      variants: withHoverView && midFrameVariants,
      style: {
        height: '100%',
        width: '100%',
        position: 'absolute',
        top: 0,
        overflow: 'hidden',
        filter: 'blur(60px)',
        opacity: 0.1
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
        spacing: 0,
        justify: "flex-start",
        style: {
          height: '100%',
          overflow: 'hidden'
        },
        children: paletteColors.slice(0, 4).map(({
          color
        }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          style: {
            height: '100%',
            background: color,
            flexGrow: 1
          }
        }, index))
      })
    }, key), ({
      ratio,
      key
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      variants: secondFrameVariants,
      style: {
        height: '100%',
        width: '100%',
        overflow: 'hidden',
        position: 'absolute',
        top: 0
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
        spacing: 3 * ratio,
        justify: "center",
        style: {
          height: '100%',
          overflow: 'hidden',
          padding: 10 * ratio,
          boxSizing: 'border-box'
        },
        children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          style: {
            fontSize: 40 * ratio,
            fontFamily: headingFontFamily,
            color: headingColor,
            fontWeight: headingFontWeight,
            lineHeight: '1em',
            textAlign: 'center'
          },
          children: label
        })
      })
    }, key)]
  });
};
var _default = exports.default = PreviewStyles;
//# sourceMappingURL=preview-styles.js.map