"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(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"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Copyright 1999-2020. Plesk International GmbH. All rights reserved.

/* eslint-disable react/no-deprecated */
const determineSource = ({
  image,
  background
}) => {
  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 = ({
  background,
  image,
  padding = 0,
  alt,
  children,
  className,
  baseClassName = `${_constants.CLS_PREFIX}preview-panel`,
  html,
  ...props
}) => {
  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__*/_react.default.createElement("div", {
        className: `${baseClassName}__loader`
      }, /*#__PURE__*/_react.default.createElement(_ContentLoader.default, null));
    }

    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__*/_react.default.createElement("img", (0, _extends2.default)({
      className: `${baseClassName}__image`
    }, imageProps));
  };

  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames.default)(baseClassName, {
      [`${baseClassName}--background`]: source.type === 'background'
    }, `${baseClassName}--${status}`, className)
  }, props, renderBackground()), renderLoader(), renderImage(), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(`${baseClassName}__content`, {
      [`${baseClassName}__content--empty`]: !children
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__content-inner`
  }, children)));
};

var _default = PreviewPanel;
exports.default = _default;