import { definePattern } from '@pandacss/dev'
import type { SystemStyleObject } from '@pandacss/types'

const skeletonPattern = definePattern({
  properties: {
    variant: { type: 'enum', value: ['shimmerLeft', 'shimmerRight', 'pulse'] },
    duration: { type: 'number' }
  } as const,
  defaultValues: {
    variant: 'pulse',
    duration: 2
  },
  transform(props) {
    const { variant, ...allOther } = props as SystemStyleObject & {
      variant: 'shimmerLeft' | 'shimmerRight' | 'pulse'
      duration: number
    }

    return {
      ...allOther,
      position: 'relative',
      overflow: 'hidden',
      _before: {
        content: '""',
        display: 'block',
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        background: variant === 'pulse' ? '{colors.neutral.3}' : undefined,
        backgroundImage: variant === 'shimmerRight' || variant === 'shimmerLeft' ? '{gradients.shimmer}' : undefined,
        animationDirection: variant === 'shimmerLeft' ? 'reverse' : 'normal',
        animationName: variant === 'pulse' ? 'pulse' : 'shimmer',
        animationDuration: `${props.duration}s`,
        animationIterationCount: 'infinite',
        animationTimingFunction: 'easeInOut'
      }
    } as SystemStyleObject
  }
})

export default skeletonPattern