// @flow
import React from 'react';
import styled from 'styled-components';
import type { StoryDecorator } from '@storybook/react';

/*
 * "Don't waste my time and CPU with your silly fade-y menus"
 * -- Seth's Dad, using Windows 2000 for the first time like a million years ago.
 *
 * This decorator detects if we are running in storyshots mode (e.g. Eyebot, a11y scan)
 * and stops animations from interfering with the screenshots those tools operate on.
 *
 * We do this basically by speeding all animations up and getting them to a final state
 * before the screenshot is taken.
 */

const ZoomAnimations = styled.div`
  *,
  *::after,
  *::before {
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    animation-delay: -0.0001s !important;
    animation-duration: 0s !important;
    animation-play-state: paused !important;
    caret-color: transparent !important;
    color-adjust: exact !important;
  }
`;

export const hyperspeedAnimationsDecorator: StoryDecorator = (story, context) =>
  window.__IS_STORYSHOTS__ ? (
    <ZoomAnimations>{story(context)}</ZoomAnimations>
  ) : (
    story(context)
  );
