"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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"));

// 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 = "".concat(_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: "".concat(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(\"".concat(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: "".concat(padding instanceof Array ? padding.join('px ') : padding, "px")
      };
    }

    return /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
      className: "".concat(baseClassName, "__image")
    }, imageProps));
  };

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

var _default = PreviewPanel;
exports.default = _default;