import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import getColor from "../../../utils/colors/getColor.js";
import useBreakpointIsLoaded from "../../../hooks/breakpoint/useBreakpointIsLoaded/index.js";
import classes from './styles.module.scss';

/**
 * A simple loading screen to display while the page is still loading all the
 * content and data it needs.
 *
 * Note that for the sake of being able to display the loading screen in the
 * context of Storybook several of the stories below all set both the `active`
 * prop and the `absolute` prop to `true` so that the loading screen doesn't
 * disappear and doesn't obscure Storybook itself. In the wild you will rarely,
 * if ever, want to set the `absolute` prop, and you will only need to set the
 * `active` prop explicitly if you want more nuanced control of when it
 * renders.
 *
 * Check out the Live Example story for a demo of the loading screen working in
 * real time.
 *
 * ```js
 *
 * import { LoadingScreen } from '@politico/interactive-style';
 * ```
 */
const LoadingScreen = function LoadingScreen(props) {
  const {
    active: activeFromProps,
    zIndex,
    bg,
    fg,
    absolute
  } = props;
  const breakpointLoaded = useBreakpointIsLoaded();
  const [active, setActive] = useState(true);
  useEffect(() => {
    let timeout;
    const value = typeof activeFromProps === 'undefined' ? !breakpointLoaded : activeFromProps;
    if (value) {
      setActive(true);
    } else {
      timeout = setTimeout(() => setActive(false), 400);
    }
    return () => {
      if (timeout) {
        clearTimeout(timeout);
      }
    };
  }, [breakpointLoaded, activeFromProps]);
  if (!active) {
    return null;
  }
  return <div className={classnames(classes.loading, {
    [classes.absolute]: absolute
  })} style={{
    zIndex,
    '--LoadingScreen-bg': getColor(bg),
    '--LoadingScreen-fg': getColor(fg)
  }}>
      <div className={classes.progress}>
        <svg viewBox="22 22 44 44">
          <circle cx="44" cy="44" r="20.2" fill="none" strokeWidth="3.6" />
        </svg>
      </div>
    </div>;
};
LoadingScreen.defaultProps = {
  active: undefined,
  zIndex: undefined,
  bg: undefined,
  fg: undefined,
  absolute: false
};
LoadingScreen.propTypes = {
  /**
  *  If the `active` prop is set to `true`, this component will always show the
  *  loading screen; if the `active` prop is explicitly set to `false`  or if
  *  no explicit value is passed to the `active` prop then this component will
  *  display the loading screen for 400ms before revealing the underlying
  *  content.
  */
  active: PropTypes.bool,
  /**
   * Sets the z-index of the loading screen, which is 50 by default.
   */
  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Sets the background color of the loading screen, which is `white` by
   * default. This prop accepts either a color name provided by this library or
   * a CSS color value.
   */
  bg: PropTypes.string,
  /**
   * Sets the color of the loading indicator, which is set to `$red-60` by
   * default. This prop accepts either a color name provided by this library or
   * a CSS color value.
   */
  fg: PropTypes.string,
  /**
   * Render the loading screen as absolutely positioned rather than fixed. This
   * is mostly helpful in the context of Storybook, but might be helpful if you
   * want to take more nuanced control of where the loading screen shows up.
   */
  absolute: PropTypes.bool
};
export default LoadingScreen;