import { keyframes, style } from '@vanilla-extract/css';
import { DefaultReset, color, config } from 'folds';

export const RelativeBase = style([
  DefaultReset,
  {
    position: 'relative',
    display: 'flex',
    width: '100%',
    height: '100%',
    maxWidth: '100%',
    maxHeight: '100%',
    borderRadius: '7px',
    overflow: 'hidden',
  },
]);

export const AbsoluteContainer = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
    maxWidth: '100%',
    maxHeight: '100%',
    borderRadius: 'inherit',
    overflow: 'hidden',
  },
]);

export const AbsoluteFooter = style([
  DefaultReset,
  {
    position: 'absolute',
    pointerEvents: 'none',
    bottom: config.space.S100,
    left: config.space.S100,
    right: config.space.S100,
    zIndex: 1,
  },
]);

export const Blur = style([
  DefaultReset,
  {
    filter: 'blur(44px)',
  },
]);

const shimmer = keyframes({
  '0%': {
    backgroundPosition: '200% 0',
  },
  '100%': {
    backgroundPosition: '-200% 0',
  },
});

/** Soft fallback when no blurhash is available. */
export const MediaSkeleton = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    borderRadius: 'inherit',
    backgroundImage: `linear-gradient(
      90deg,
      ${color.SurfaceVariant.Container} 0%,
      ${color.SurfaceVariant.ContainerHover} 40%,
      ${color.SurfaceVariant.Container} 80%
    )`,
    backgroundSize: '200% 100%',
    animation: `${shimmer} 1.4s ease-in-out infinite`,
  },
]);

const blurhashFadeIn = keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});

/** Soft blurhash layer that fills the reserved media box. */
export const BlurhashPlaceholder = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    overflow: 'hidden',
    borderRadius: 'inherit',
    zIndex: 0,
    // Soften the decode so it reads as color blobs; slight scale hides blur edges.
    filter: 'blur(14px)',
    transform: 'scale(1.06)',
    opacity: 0,
    animation: `${blurhashFadeIn} 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards`,
  },
]);

/** Media starts invisible and fades in once loaded over the placeholder. */
export const MediaFadeIn = style({
  zIndex: 1,
  opacity: 0,
  transition: 'opacity 520ms cubic-bezier(0.22, 1, 0.36, 1)',
});

export const MediaFadeInLoaded = style({
  opacity: 1,
});