"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _ContentLoader = _interopRequireDefault(require("../ContentLoader"));
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _helpers = require("./helpers");
var _noImage = _interopRequireDefault(require("./images/no-image.svg"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

const determineSource = _ref => {
  let {
    image,
    background
  } = _ref;
  if (image) {
    return {
      url: image,
      type: 'image'
    };
  } else if (background) {
    return {
      url: background,
      type: 'background'
    };
  }
  return {
    url: _noImage.default,
    type: 'noImage'
  };
};

/**
 * `PreviewPanel` component is used for displaying website preview.
 * @since 0.3.0
 */
const PreviewPanel = _ref2 => {
  let {
    background,
    image,
    padding = 0,
    alt,
    children,
    className,
    baseClassName = `${_constants.CLS_PREFIX}preview-panel`,
    html,
    ...props
  } = _ref2;
  const source = determineSource({
    image,
    background
  });
  const [status, setStatus] = (0, _react.useState)(source.type === 'noImage' ? 'success' : 'loading');
  (0, _react.useEffect)(() => {
    let applyStatus = setStatus;
    const cleanup = () => {
      applyStatus = () => {};
    };
    if (source.type === 'noImage') {
      applyStatus('success');
      return cleanup;
    }
    setStatus('loading');
    (0, _helpers.loadImage)(source.url, {
      onSuccess: () => applyStatus('success'),
      onFailure: () => applyStatus('failure')
    });
    return cleanup;
  }, [source.type, source.url]);
  const renderLoader = () => {
    if (status === 'loading') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__loader`,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentLoader.default, {})
      });
    }
    return null;
  };
  const renderBackground = () => {
    if (source.type !== 'background') {
      return null;
    }
    let src;
    switch (status) {
      case 'success':
        src = source.url;
        break;
      case 'failure':
        src = _noImage.default;
        break;
      default:
        return null;
    }
    return {
      style: {
        ...props.style,
        backgroundImage: `url("${src}")`
      }
    };
  };
  const renderImage = () => {
    if (source.type !== 'image' && source.type !== 'noImage') {
      return null;
    }
    let src;
    switch (status) {
      case 'success':
        src = source.url;
        break;
      case 'failure':
        src = _noImage.default;
        break;
    }
    const imageProps = {};
    if (status !== 'loading') {
      imageProps.src = src;
      if (alt) {
        imageProps.alt = alt;
      }
    }
    if (padding) {
      imageProps.style = {
        padding: `${padding instanceof Array ? padding.join('px ') : padding}px`
      };
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      className: `${baseClassName}__image`,
      ...imageProps
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(baseClassName, {
      [`${baseClassName}--background`]: source.type === 'background'
    }, `${baseClassName}--${status}`, className),
    ...props,
    ...renderBackground(),
    children: [renderLoader(), renderImage(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(`${baseClassName}__content`, {
        [`${baseClassName}__content--empty`]: !children
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__content-inner`,
        children: children
      })
    })]
  });
};
var _default = exports.default = PreviewPanel;