"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.OffsetBehavior = void 0;

var React = _interopRequireWildcard(require("react"));

var _Bubble = _interopRequireDefault(require("../../bubble/Bubble"));

var _Text = _interopRequireDefault(require("../../text/Text"));

var _Button = _interopRequireDefault(require("../../buttons/Button"));

var _Icon = _interopRequireDefault(require("../../icons/Icon"));

var _Transition = _interopRequireDefault(require("../Transition"));

var _Stage = _interopRequireDefault(require("./common/Stage"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var fadeEffect = {
  initial: {
    opacity: 0
  },
  animate: {
    opacity: 1,
    duration: 'moderate1',
    easing: 'entry'
  },
  exit: {
    opacity: 0,
    duration: 'quick2',
    easing: 'exit'
  }
};
var containerSlideEffect = {
  initial: {
    opacity: 0,
    transform: {
      translateY: '-m',
      scaleY: 0.5
    }
  },
  animate: {
    opacity: {
      value: 1,
      duration: 'quick2'
    },
    transform: {
      translateY: 0,
      duration: 'gentle1',
      origin: 'left top'
    },
    easing: 'entry'
  },
  exit: {
    opacity: 0,
    transform: {
      translateY: '-m'
    },
    duration: 'quick2',
    easing: 'exit'
  }
};
/**
 * A content transformation opposite to the container
 * transformation will keep the height of the content
 * while animating the container.
 */

var contentCounterSlideEffect = {
  initial: {
    // counter scale...
    transform: {
      scaleY: 1.5
    }
  },
  animate: {
    // with the same duration and easing as container
    transform: {
      scaleY: 1,
      duration: 'gentle1',
      origin: 'left top'
    },
    easing: 'entry'
  },
  exit: {
    opacity: 0,
    duration: 'quick2',
    easing: 'exit'
  }
};

var OffsetBehavior = function OffsetBehavior() {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      open = _React$useState2[0],
      setOpen = _React$useState2[1];

  return /*#__PURE__*/React.createElement(_Stage.default, {
    format: "portrait"
  }, /*#__PURE__*/React.createElement(_Transition.default, {
    active: open,
    effect: containerSlideEffect
  }, /*#__PURE__*/React.createElement(_Bubble.default, {
    color: "blue-30",
    direction: "top",
    style: {
      padding: 24,
      marginTop: 64
    },
    noShadow: true
  }, /*#__PURE__*/React.createElement(_Transition.default, {
    active: open,
    effect: fadeEffect,
    fillMode: "backwards",
    delay: 100
  }, /*#__PURE__*/React.createElement(_Transition.default, {
    active: open,
    effect: contentCounterSlideEffect,
    fillMode: "backwards",
    className: "sg-space-y-s"
  }, /*#__PURE__*/React.createElement(_Text.default, {
    size: "small",
    weight: "bold"
  }, "Louis Napoleon Bonaparte was the nephew of Napoleon Bonaparte."), /*#__PURE__*/React.createElement(_Text.default, {
    size: "small"
  }, "Napoleon III, the nephew of Napoleon I, was the first elected President of France from 1848 to 1852. Louis Napoleon seized power in 1851 and served as Emperor of the French from 1852 to 1870. He founded the Second French Empire and was its only emperor until the French army was defeated in the Franco-Prussian War in 1870."), /*#__PURE__*/React.createElement(_Text.default, {
    size: "small"
  }, "He aimed to modernize the French economy, rebuilt the center of Paris, expanded the overseas empire."))))), /*#__PURE__*/React.createElement(_Button.default, {
    variant: "solid",
    icon: /*#__PURE__*/React.createElement(_Icon.default, {
      type: open ? 'close' : 'plus'
    }),
    onClick: function onClick() {
      return setOpen(function (b) {
        return !b;
      });
    },
    iconOnly: true,
    style: {
      position: 'absolute',
      top: 24,
      left: '50%',
      marginLeft: -20
    }
  }));
};

exports.OffsetBehavior = OffsetBehavior;
OffsetBehavior.parameters = {
  layout: 'centered'
};