import React from 'react'

import { omitThemingProps, styled, useStyleConfig, vui, VuiComponent } from '../core'
import { cs, filterUndefined } from '../utils'
import { SkeletonProps } from './skeleton.types'

export const SkeletonBase = styled.divBox`
  animation: vui-pulse 1.5s ease-in-out 0.5s infinite;
`
/**
 * Displays one or more animated skeleton elements to signify loading content.
 */
export const Skeleton = vui<'div', SkeletonProps>((props, ref) => {
  const { className, repeat = 1, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Skeleton', props)

  const arr = Array(repeat).fill(0)

  const aliasedProps = filterUndefined({
    w: props.variant === 'circle' ? styles.h : undefined,
  })

  return (
    <>
      {arr.map((_, i) => (
        <SkeletonBase
          className={cs('vui-skeleton', className)}
          key={i}
          ref={ref}
          {...styles}
          {...aliasedProps}
          {...rest}
        />
      ))}
    </>
  )
}) as VuiComponent<'div', SkeletonProps>

Skeleton.displayName = 'Skeleton'

export default Skeleton
