import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Transition from '../Transition';
import Flex from '../../flex/Flex';
import Button from '../../buttons/Button';
import Icon from '../../icons/Icon';
import DummyBox from './common/DummyBox';
import Stage from './common/Stage';
var colorsOrder = ['red', 'yellow', 'blue'];

var createSlideInEffect = function createSlideInEffect(direction) {
  return {
    initial: {
      transform: {
        translateX: direction === 'left' ? 'm' : '-m'
      },
      opacity: 0
    },
    animate: {
      transform: {
        translateX: 0
      },
      opacity: 1,
      duration: 'moderate1',
      easing: 'entry'
    }
  };
};
/**
 * An effect with only the "animate" phase always
 * performs a transition from the current position.
 */


var createSlideOutEffect = function createSlideOutEffect(direction) {
  return {
    animate: {
      transform: {
        translateX: direction === 'left' ? '-m' : 'm'
      },
      opacity: 0,
      duration: 'moderate1',
      easing: 'exit'
    }
  };
};

export var SharedAxis = function SharedAxis() {
  var _React$useState = React.useState(null),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      effect = _React$useState2[0],
      setEffect = _React$useState2[1];

  var _React$useState3 = React.useState(0),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      currentViewIndex = _React$useState4[0],
      setCurrentViewIndex = _React$useState4[1];

  var nextTransitionCallback = React.useRef();

  var changeView = function changeView(viewIndex) {
    if (viewIndex !== currentViewIndex) {
      var direction = currentViewIndex < viewIndex ? 'left' : 'right'; // hide previous view

      setEffect(createSlideOutEffect(direction)); // show the next view

      nextTransitionCallback.current = function () {
        setCurrentViewIndex(viewIndex);
        setEffect(createSlideInEffect(direction));
        nextTransitionCallback.current = null;
      };
    }
  };

  var handleTransitionEnd = function handleTransitionEnd() {
    if (nextTransitionCallback.current) {
      nextTransitionCallback.current();
    }
  };

  return /*#__PURE__*/React.createElement(Stage, {
    centered: true
  }, /*#__PURE__*/React.createElement(Flex, {
    marginBottom: "m",
    justifyContent: "center",
    className: "sg-space-x-xs"
  }, colorsOrder.map(function (color, index) {
    return /*#__PURE__*/React.createElement(Button, {
      key: color,
      variant: index === currentViewIndex ? 'solid-light' : 'transparent',
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "circle",
        color: buttonIconColors[color]
      }),
      onClick: function onClick() {
        return changeView(index);
      },
      iconOnly: true
    });
  })), /*#__PURE__*/React.createElement(Transition, {
    active: true,
    effect: effect,
    onTransitionEnd: handleTransitionEnd
  }, /*#__PURE__*/React.createElement(DummyBox, {
    size: "medium",
    color: colorsOrder[currentViewIndex]
  })));
};
var buttonIconColors = {
  red: 'icon-red-50',
  yellow: 'icon-yellow-50',
  blue: 'icon-blue-50'
};
SharedAxis.parameters = {
  layout: 'centered'
};