import { useTranslation } from '../../core/hooks/useTranslation';
import { useTestIdAttribute } from '../../hooks/useTestIdAttribute';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';

import { SkeletonVariant } from './constants';
import { StyledSkeleton } from './styled';

/** Props of {@link Skeleton} */
export interface SkeletonProps extends CommonProps {
  /**
   * A variant of skeleton rounding
   *
   * @default {@link SkeletonVariant.Rounded}
   */
  variant?: SkeletonVariant;
}

/**
 * The Skeleton component is used as a placeholder of content (a page or a set of components) before it gets loaded.
 * It may be helpful when loading takes a noticeable amount of time.
 *
 * ```tsx
 * const isLoading: boolean;
 * isLoading ? <Skeleton /> : <DataComponent />
 * ```
 *
 * <Story id="components-skeleton--default" />
 *
 * There are three shapes available: `Square`, `Rounded`, and `Circle.`
 *
 * <Story id="components-skeleton--variants" />
 *
 * You can use multiple stylized instances of the Skeleton component to emulate an interface of any required fidelity level.
 *
 * <Story id="components-skeleton-examples--card" />
 * <Story id="components-skeleton-examples--user-info" />
 */
export function Skeleton(props: SkeletonProps) {
  const { variant = SkeletonVariant.Rounded, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();
  const { t } = useTranslation();

  return (
    <StyledSkeleton
      $variant={variant}
      aria-busy="true"
      aria-describedby={ariaDescribedBy}
      aria-disabled="true"
      aria-label={t('ui.skeleton')}
      className={className}
      {...{ [testIdAttribute]: testId }}
    />
  );
}