import {createComponent} from '@workday/canvas-kit-react/common';
import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

import {SkeletonShape, skeletonSurfaceFillStencil} from './SkeletonShape';

export interface SkeletonHeaderProps extends CSProps {
  /**
   * The background color of the skeleton
   * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
   */
  backgroundColor?: string;
  /**
   * The height of the shape in `px` or `%`.
   * @default 28px
   */
  height?: number | string;
  /**
   *  The width of the shape in `px` or `%`.
   * @default 100%
   */
  width?: number | string;
}

export const skeletonHeaderStencil = createStencil({
  extends: skeletonSurfaceFillStencil,
  vars: {
    width: '',
    height: '',
    backgroundColor: '',
  },
  base: ({width, height}) => ({
    borderRadius: system.legacy.shape.sm,
    height: cssVar(height, system.legacy.size.xs),
    width: width,
    marginBlockEnd: system.legacy.size.xxxs,
  }),
});

export const SkeletonHeader = createComponent('div')<SkeletonHeaderProps>({
  displayName: 'Skeleton.Header',
  Component: (
    {width = '100%', backgroundColor, height, ...elemProps}: SkeletonHeaderProps,
    ref,
    Element
  ) => (
    <SkeletonShape
      ref={ref}
      as={Element}
      {...handleCsProp(
        elemProps,
        skeletonHeaderStencil({
          width: typeof width === 'number' ? px2rem(width) : width,
          backgroundColor,
          height: typeof height === 'number' ? px2rem(height) : height,
        })
      )}
    />
  ),
});