import { globalStyle, keyframes, style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

import { vars } from '../css';

const flicker = keyframes({
  '0%': { opacity: '1' },
  '100%': { opacity: '0.5' },
});

export const skeletonBase = style({
  borderColor: 'transparent',
  color: 'transparent',
  outlineColor: 'transparent',
  boxShadow: 'none',
  pointerEvents: 'none',
  userSelect: 'none',

  animation: `0.8s linear infinite alternate ${flicker}`,
});

export const skeleton = recipe({
  base: [
    skeletonBase,
    {
      backgroundColor: vars.components.skeleton.colors.base,
    },
  ],

  variants: {
    height: {
      md: {
        height: vars.components.skeleton.sizes.md,
      },
    },
  },
});

export type SkeletonVariants = NonNullable<RecipeVariants<typeof skeleton>>;

const skeletonWrapperBase = style({
  position: 'relative',

  '::after': {
    content: '',

    position: 'absolute',
    top: '50%',
    left: 0,
    right: 0,
    transform: 'translateY(-50%)',
    display: 'block',
    height: '100%',

    backgroundColor: vars.components.skeleton.colors.base,
    border: 'inherit',
    borderRadius: 'inherit',
  },
});

export const skeletonWrapper = recipe({
  base: [skeletonBase, skeletonWrapperBase],

  variants: {
    height: {
      md: {
        '::after': {
          height: vars.components.skeleton.sizes.md,
        },
      },
    },
  },
});

globalStyle(`${skeletonWrapperBase} > *`, {
  visibility: 'hidden',
});

export type SkeletonWrapperVariants = NonNullable<
  RecipeVariants<typeof skeletonWrapper>
>;