import _extends from "@babel/runtime/helpers/extends";
// Copyright 1999-2020. Plesk International GmbH. All rights reserved.

/* eslint-disable react/no-deprecated */
import React, { useState, useEffect } from 'react';
import ContentLoader from '../ContentLoader';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { loadImage } from './helpers';
import noImage from './images/no-image.svg';

const determineSource = ({
  image,
  background
}) => {
  if (image) {
    return {
      url: image,
      type: 'image'
    };
  } else if (background) {
    return {
      url: background,
      type: 'background'
    };
  }

  return {
    url: noImage,
    type: 'noImage'
  };
};
/**
 * `PreviewPanel` component is used for displaying website preview.
 * @since 0.3.0
 */


const PreviewPanel = ({
  background,
  image,
  padding = 0,
  alt,
  children,
  className,
  baseClassName = `${CLS_PREFIX}preview-panel`,
  html,
  ...props
}) => {
  const source = determineSource({
    image,
    background
  });
  const [status, setStatus] = useState(source.type === 'noImage' ? 'success' : 'loading');
  useEffect(() => {
    let applyStatus = setStatus;

    const cleanup = () => {
      applyStatus = () => {};
    };

    if (source.type === 'noImage') {
      applyStatus('success');
      return cleanup;
    }

    setStatus('loading');
    loadImage(source.url, {
      onSuccess: () => applyStatus('success'),
      onFailure: () => applyStatus('failure')
    });
    return cleanup;
  }, [source.type, source.url]);

  const renderLoader = () => {
    if (status === 'loading') {
      return /*#__PURE__*/React.createElement("div", {
        className: `${baseClassName}__loader`
      }, /*#__PURE__*/React.createElement(ContentLoader, 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;
        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;
        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.createElement("img", _extends({
      className: `${baseClassName}__image`
    }, imageProps));
  };

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

export default PreviewPanel;