import _isEqual from "lodash/isEqual";
import _get from "lodash/get";
import React from "react";
import { connect } from "../../../redux";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { getActiveElementWithChildren } from "../../../selectors";
import { i18n } from '@fishx/i18n';
import useUpdateHandlers from "../useUpdateHandlers";
import Footer from "../components/Footer";
import Select from "../components/Select";
import Input from "../components/Input";
import DurationInput from "../components/SliderWithInput";
import { ReactComponent as TimerIcon } from "@svgr/webpack!./icons/round-av_timer-24px.svg";
import ElementAnimation from "../../../../render/components/ElementAnimation";
var DATA_NAMESPACE = "data.settings.animation";

var Settings = function Settings(_ref) {
  var element = _ref.element,
      updateElement = _ref.updateElement,
      title = _ref.title,
      advanced = _ref.advanced;

  var _useUpdateHandlers = useUpdateHandlers({
    element: element,
    updateElement: updateElement,
    dataNamespace: DATA_NAMESPACE
  }),
      getUpdateValue = _useUpdateHandlers.getUpdateValue,
      getUpdatePreview = _useUpdateHandlers.getUpdatePreview;

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
    label: title
  }, /*#__PURE__*/React.createElement(Select, {
    label: i18n('PAGEBUIDER_SETTINGS_ANIMATION'),
    valueKey: DATA_NAMESPACE + ".name",
    updateValue: getUpdateValue("name")
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "No animation"), /*#__PURE__*/React.createElement("optgroup", {
    label: "Fade"
  }, /*#__PURE__*/React.createElement("option", {
    value: "fade"
  }, "Fade"), /*#__PURE__*/React.createElement("option", {
    value: "fade-up"
  }, "Fade Up"), /*#__PURE__*/React.createElement("option", {
    value: "fade-down"
  }, "Fade Down"), /*#__PURE__*/React.createElement("option", {
    value: "fade-left"
  }, "Fade Left"), /*#__PURE__*/React.createElement("option", {
    value: "fade-right"
  }, "Fade Right"), /*#__PURE__*/React.createElement("option", {
    value: "fade-up-right"
  }, "Fade Up Right"), /*#__PURE__*/React.createElement("option", {
    value: "fade-up-left"
  }, "Fade Up Left"), /*#__PURE__*/React.createElement("option", {
    value: "fade-down-right"
  }, "Fade Down Right"), /*#__PURE__*/React.createElement("option", {
    value: "fade-down-left"
  }, "Fade Down Left")), /*#__PURE__*/React.createElement("optgroup", {
    label: "Flip"
  }, /*#__PURE__*/React.createElement("option", {
    value: "flip-up"
  }, "Flip Up"), /*#__PURE__*/React.createElement("option", {
    value: "flip-down"
  }, "Flip Down"), /*#__PURE__*/React.createElement("option", {
    value: "flip-left"
  }, "Flip Left"), /*#__PURE__*/React.createElement("option", {
    value: "flip-right"
  }, "Flip Right")), /*#__PURE__*/React.createElement("optgroup", {
    label: "Slide"
  }, /*#__PURE__*/React.createElement("option", {
    value: "slide-up"
  }, "Slide Up"), /*#__PURE__*/React.createElement("option", {
    value: "slide-down"
  }, "Slide Down"), /*#__PURE__*/React.createElement("option", {
    value: "slide-left"
  }, "Slide Left"), /*#__PURE__*/React.createElement("option", {
    value: "slide-right"
  }, "Slide Right"))), advanced && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DurationInput, {
    className: "no-bottom-padding",
    label: "Duration",
    icon: /*#__PURE__*/React.createElement(TimerIcon, null),
    valueKey: DATA_NAMESPACE + ".duration",
    updateValue: getUpdateValue("duration"),
    updatePreview: getUpdatePreview("duration")
  }), /*#__PURE__*/React.createElement(Input, {
    className: "no-bottom-padding",
    placeholder: "ms",
    label: "Delay",
    valueKey: DATA_NAMESPACE + ".delay",
    updateValue: getUpdateValue("delay")
  }), /*#__PURE__*/React.createElement(Input, {
    className: "no-bottom-padding",
    placeholder: "px",
    label: "offset",
    valueKey: DATA_NAMESPACE + ".offset",
    updateValue: getUpdateValue("offset")
  }), /*#__PURE__*/React.createElement(Select, {
    label: "Easing",
    valueKey: DATA_NAMESPACE + ".easing",
    updateValue: getUpdateValue("easing")
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "Default"), /*#__PURE__*/React.createElement("option", {
    value: "linear"
  }, "Linear "), /*#__PURE__*/React.createElement("option", {
    value: "ease"
  }, "Ase "), /*#__PURE__*/React.createElement("option", {
    value: "ease-in"
  }, "Ase in"), /*#__PURE__*/React.createElement("option", {
    value: "ease-out"
  }, "Out"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-out"
  }, "In out"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-back"
  }, "In back"), /*#__PURE__*/React.createElement("option", {
    value: "ease-out-back"
  }, "Out back"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-out-back"
  }, "In out-back"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-sine"
  }, "In sine"), /*#__PURE__*/React.createElement("option", {
    value: "ease-out-sine"
  }, "Out sine"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-out-sine"
  }, "In out-sine"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-quad"
  }, "In quad"), /*#__PURE__*/React.createElement("option", {
    value: "ease-out-quad"
  }, "Out quad"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-out-quad"
  }, "In out-quad"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-cubic"
  }, "In cubic"), /*#__PURE__*/React.createElement("option", {
    value: "ease-out-cubic"
  }, "Out cubic"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-out-cubic"
  }, "In out-cubic"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-quart"
  }, "In quart"), /*#__PURE__*/React.createElement("option", {
    value: "ease-out-quart"
  }, "Out quart"), /*#__PURE__*/React.createElement("option", {
    value: "ease-in-out-quart"
  }, "In out-quart"))), /*#__PURE__*/React.createElement(Footer, {
    advanced: advanced,
    toggleAdvanced: getUpdateValue("advanced")
  }))));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    }
  };
};

var ConnectedSettings = connect(function (state) {
  var element = getActiveElementWithChildren(state);
  return {
    advanced: _get(element, DATA_NAMESPACE + ".advanced", false),
    // element: { id: element.id, type: element.type, path: element.path }
    element: element
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})( /*#__PURE__*/React.memo(Settings, function (prev, next) {
  return _isEqual(prev, next);
}));
export default function AnimationSettings(props) {
  return /*#__PURE__*/React.createElement(ElementAnimation, null, function (animation) {
    return /*#__PURE__*/React.createElement(ConnectedSettings, Object.assign({}, props, {
      animation: animation
    }));
  });
}
//# sourceMappingURL=AnimationSettings.js.map