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

import { 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';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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,
    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 = `${CLS_PREFIX}preview-panel`,
    html,
    ...props
  } = _ref2;
  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__*/_jsx("div", {
        className: `${baseClassName}__loader`,
        children: /*#__PURE__*/_jsx(ContentLoader, {})
      });
    }
    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__*/_jsx("img", {
      className: `${baseClassName}__image`,
      ...imageProps
    });
  };
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(baseClassName, {
      [`${baseClassName}--background`]: source.type === 'background'
    }, `${baseClassName}--${status}`, className),
    ...props,
    ...renderBackground(),
    children: [renderLoader(), renderImage(), /*#__PURE__*/_jsx("div", {
      className: classNames(`${baseClassName}__content`, {
        [`${baseClassName}__content--empty`]: !children
      }),
      children: /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__content-inner`,
        children: children
      })
    })]
  });
};
export default PreviewPanel;