/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useLayoutEffect, useState } from 'react';
import { MediaPlacement } from '../../../../../../constants';
import { Preview } from '../../../elements';
import Block from '../../block';
const previewBlockStyleCommon = null;
const ignoreContainerPaddingStyle = null;

/**
 * Represents a resolved PreviewBlock, which typically contains media or other large format content.
 * @public
 * @param {PreviewBlock} PreviewBlock
 * @see Block
 */
const PreviewBlockResolvedView = ({
  ignoreContainerPadding = false,
  onError,
  placement,
  testId,
  overrideUrl,
  style,
  className,
  ...blockProps
}) => {
  const [dynamicStyles, setDynamicStyles] = useState(style !== null && style !== void 0 ? style : {});
  const updateStyles = useCallback(() => {
    if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
      const containerPadding = ignoreContainerPadding ? '0px' : 'var(--container-padding)';
      const newStyle = {
        ...style,
        position: 'absolute',
        top: containerPadding,
        bottom: containerPadding,
        width: `calc(var(--preview-block-width) - ${containerPadding})`,
        ...(placement === MediaPlacement.Left ? {
          left: containerPadding
        } : {}),
        ...(placement === MediaPlacement.Right ? {
          right: containerPadding
        } : {})
      };
      setDynamicStyles(newStyle);
    } else {
      if (ignoreContainerPadding) {
        setDynamicStyles({
          ...style
        });
      }
    }
  }, [ignoreContainerPadding, placement, style]);

  // Should be useLayoutEffect to avoid flicker.
  // Styles should be set before paint.
  useLayoutEffect(() => {
    updateStyles();
  }, [ignoreContainerPadding, placement, updateStyles, className]);
  const handleOnLoad = useCallback(() => {
    updateStyles();
  }, [updateStyles]);
  const handleOnError = useCallback(() => {
    if (onError) {
      onError();
    }
  }, [onError]);
  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
    testId: `${testId}-resolved-view`,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    style: dynamicStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    ,
    className: ax([placement && "_1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr", !placement && ignoreContainerPadding && "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9", className])
  }), /*#__PURE__*/React.createElement(Preview, {
    onError: handleOnError,
    onLoad: handleOnLoad,
    overrideUrl: overrideUrl
  }));
};
export default PreviewBlockResolvedView;