import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { useFirstPaint } from './useFirstPaint';
import './_use-first-paint-example.scss';
import classNames from 'classnames';
export var Example = function Example() {
  var animatedElementRef = React.useRef();
  var shouldAnimateRef = React.useRef(false);

  var _React$useState = React.useState(true),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isToggled = _React$useState2[0],
      setIsToggled = _React$useState2[1];

  var handleClick = React.useCallback(function () {
    setIsToggled(!isToggled);

    if (shouldAnimateRef.current) {
      animatedElementRef.current.style.animationDuration = '';
    }
  }, [isToggled]);
  React.useLayoutEffect(function () {
    animatedElementRef.current.style.animationDuration = '0ms';
  }, []);
  useFirstPaint(function () {
    shouldAnimateRef.current = true;
  });
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      height: 300,
      width: 600
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('use-first-paint-example-box', {
      'use-first-paint-example-box--toggled': isToggled
    }),
    onClick: handleClick,
    ref: animatedElementRef
  }, "Click me")));
};