import React from 'react';
import { createPortal } from 'react-dom';
import classNames from 'classnames';

import { Loader as CoreLoader, type LoaderProps as CoreLoaderProps } from '@shoptet/ui-core-web';
import type { Exact, SafeOmit } from '@shoptet/utils';

import type { OmitPrivate, SafeExtract, Size } from '../../types';

export interface InheritedCoreLoaderProps extends SafeOmit<OmitPrivate<CoreLoaderProps>, 'a11yLabel'> {}

export interface LoaderOwnProps extends InheritedCoreLoaderProps {
  /**
   * Size of the loader.
   */
  size?: SafeExtract<Size, 'sm' | 'md' | 'lg'>;
  /**
   * Whether the loader should be displayed fullscreen (rendered in a portal).
   * When true, the loader is rendered over the entire screen.
   */
  fullscreen?: boolean;
  /**
   * Accessible label describing what is loading. Defaults to the translated "Loading…" string.
   */
  label?: string;
}

export interface LoaderProps extends LoaderOwnProps {}

export const Loader: React.FC<LoaderProps> = ({ fullscreen, size = 'lg', label, ...coreLoaderProps }: LoaderProps) => {
  coreLoaderProps satisfies Exact<InheritedCoreLoaderProps, typeof coreLoaderProps>;

  const LoaderElement = (
    <CoreLoader
      a11yLabel={label}
      a11yLive={fullscreen ? 'assertive' : 'polite'}
      {...coreLoaderProps}
      className={classNames('loader', {
        [`loader--${size}`]: size,
      })}
    />
  );

  const LoaderContainer = (
    <div
      className={classNames('loaderArea', {
        [`loaderArea--screen`]: fullscreen,
      })}
    >
      {LoaderElement}
    </div>
  );

  return fullscreen ? createPortal(LoaderContainer, document.body) : LoaderElement;
};