import { TaskState } from '@wix/bex-core';
import React, { ReactElement, ReactNode } from 'react';
import { Box, BoxProps, Loader } from '@wix/design-system';
import { observer } from 'mobx-react-lite';

export interface SplashProps extends Partial<BoxProps> {
  state: TaskState<unknown>;
  children?: ReactNode;
  renderError: (params: { err: unknown; isOnline: boolean }) => ReactElement;
  dataHook?: string;
}

function _Splash(props: SplashProps) {
  const { state, children, renderError, height = '100vh', ...rest } = props;

  const { status } = state;

  let child: ReactNode;

  if (status.isIdle || status.isLoading) {
    child = (
      <Box height="100%" align="center" verticalAlign="middle">
        <Loader dataHook="initial-loader" size="large" />
      </Box>
    );
  } else {
    child = children;
  }

  return (
    <Box
      boxSizing="border-box"
      align="center"
      width="100%"
      direction="vertical"
      {...rest}
      height={height}
    >
      {child}
    </Box>
  );
}

export const Splash = observer(_Splash);