// @flow weak
// example from https://github.com/veltman/flubber

import React, { PureComponent } from 'react';
import { feature } from 'topojson';
import { easeExpInOut } from 'd3-ease';
import Animate from 'react-move/Animate';
import { interpolate } from 'flubber';
import Surface from 'docs/src/components/Surface'; // this is just a responsive SVG
import statesJSON from './states.json';

// **************************************************
//  SVG Layout
// **************************************************
const view = [1000, 450]; // [width, height]
const trbl = [10, 10, 10, 10]; // [top, right, bottom, left] margins

class Example extends PureComponent {
  state = {
    states: feature(statesJSON, statesJSON.objects.states)
      .features.map((d) => {
        return d.geometry.coordinates[0];
      }),
  }

  update = () => { // take the first one, put it at the end
    this.setState(({ states }) => ({
      states: [
        ...states.slice(1),
        states[0],
      ],
    }));
  }

  render() {
    const { update, state: { states } } = this;
    const interpolator = interpolate(states[0], states[1]);

    return (
      <div>
        <Surface view={view} trbl={trbl}>
          <Animate
            start={{
              opacity: 0,
              d: interpolator(0),
            }}

            enter={[
              {
                opacity: [0.7],
                timing: { duration: 1000 },
              },
              {
                d: interpolator,
                timing: { delay: 1000, duration: 1000, ease: easeExpInOut },
                events: { end: update },
              },
            ]}

            update={{
              d: interpolator,
              timing: { delay: 200, duration: 1000, ease: easeExpInOut },
              events: { end: update },
            }}
          >
            {(state) => {
              return (
                <g transform="translate(100, 0) scale(0.8)">
                  <path
                    fill="#00a7d8"
                    {...state}
                  />
                </g>
              );
            }}
          </Animate>
        </Surface>
      </div>
    );
  }
}

export default Example;

@@ -150,29 +150,28 @@
 mport %7B ease
-ExpIn
+Quad
 Out %7D from '
@@ -1145,24 +1145,73 @@
       %3Cdiv%3E%0A
+        %3Cbutton onClick=%7Bupdate%7D%3EUpdate%3C/button%3E%0A
         %3CSur
@@ -1336,17 +1336,17 @@
 polator(
-0
+1
 ),%0A     
@@ -1490,192 +1490,8 @@
  %7D,%0A
-              %7B%0A                d: interpolator,%0A                timing: %7B delay: 1000, duration: 1000, ease: easeExpInOut %7D,%0A                events: %7B end: update %7D,%0A              %7D,%0A
     
@@ -1582,20 +1582,8 @@
 g: %7B
- delay: 200,
  dur
@@ -1609,55 +1609,15 @@
 ease
-ExpInOut %7D,%0A              events: %7B end: update
+QuadOut
  %7D,%0A

add update button