import React from "react";
import styled, { css } from "styled-components";
import Loader from "./loader";

/**
 * @param {{
 * loaderAsset: object,
 * isSectionLoader: boolean,
 * hasBackground: boolean,
 * fixed: boolean,
 * loaderHeight: number,
 * loaderWidth: number,
 * zIndex: number,
 * }} props - properties of the dropdown component
 */

const Backdrop = styled.div`
  ${({ isSectionLoader, hasBackground, fixed, zIndex }) =>
    isSectionLoader
      ? css`
          position: static;
          width: 100%;
          /* height: 100%; */
          background: transparent;
        `
      : css`
          position: ${fixed ? "fixed" : "absolute"};
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background: ${hasBackground
            ? "rgba(110, 62, 62, 0.4)"
            : "transparent"};
          z-index: ${zIndex};
        `}
`;

const LoaderWrapper = styled.div`
  ${({ isSectionLoader, fixed, zIndex }) =>
    isSectionLoader
      ? css`
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 10;
        `
      : css`
          position: ${fixed ? "fixed" : "absolute"};
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: ${zIndex};
        `}
  img {
    width: 300px;
    height: 200px;
  }
`;

const FullPageLoader = ({
  isSectionLoader = false,
  hasBackground = false,
  loaderAsset,
  fixed,
  loaderWidth = 400,
  loaderHeight = 400,
  zIndex = 999999999999,
}) => {
  return (
    <Backdrop
      isSectionLoader={isSectionLoader}
      hasBackground={hasBackground}
      fixed={fixed}
      zIndex={zIndex}
    >
      <LoaderWrapper
        isSectionLoader={isSectionLoader}
        fixed={fixed}
        zIndex={zIndex}
      >
        <Loader
          loaderAsset={loaderAsset}
          width={loaderWidth}
          height={loaderHeight}
        />
      </LoaderWrapper>
    </Backdrop>
  );
};

export default FullPageLoader;
