'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var classnames = require('classnames');
var Button = require('@bigbinary/neetoui/Button');
var i18next = require('i18next');
var Computer = require('@bigbinary/neeto-icons/Computer');
var Tablet = require('@bigbinary/neeto-icons/Tablet');
var Mobile = require('@bigbinary/neeto-icons/Mobile');
var injectCss = require('./inject-css-B6qYtOJe.js');
var React = require('react');
var jsxRuntime = require('react/jsx-runtime');

var RESPONSIVE_DEVICES = {
  DESKTOP: "desktop",
  TABLET: "tablet",
  MOBILE: "mobile"
};
var RESPONSIVE_DEVICES_MAP = _defineProperty(_defineProperty(_defineProperty({}, RESPONSIVE_DEVICES.DESKTOP, {
  icon: Computer,
  label: i18next.t("neetoMolecules.responsiveDevicePicker.desktop")
}), RESPONSIVE_DEVICES.TABLET, {
  icon: Tablet,
  label: i18next.t("neetoMolecules.responsiveDevicePicker.tablet")
}), RESPONSIVE_DEVICES.MOBILE, {
  icon: Mobile,
  label: i18next.t("neetoMolecules.responsiveDevicePicker.mobile")
});

var css = ".neeto-molecules-device-switcher{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-device-switcher .neeto-ui-btn{margin-left:-.0625rem}.neeto-molecules-device-switcher .neeto-ui-btn.neeto-molecules-device-switcher__btn--active{--neeto-ui-btn-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-hover-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-focus-color:rgb(var(--neeto-ui-primary-600));z-index:1}.neeto-molecules-device-switcher .neeto-ui-btn:first-child{border-bottom-right-radius:0;border-left:0;border-top-right-radius:0;margin-left:0}.neeto-molecules-device-switcher .neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}.neeto-molecules-device-switcher .neeto-ui-btn:not(:first-child):not(:last-child){border-radius:0}";
injectCss.n(css,{});

var _excluded = ["className", "selectedDevice", "onDeviceChange"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ResponsiveDevicePicker = function ResponsiveDevicePicker(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    selectedDevice = _ref.selectedDevice,
    onDeviceChange = _ref.onDeviceChange,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
    className: classnames("neeto-molecules-device-switcher flex items-center justify-center", className)
  }, otherProps), {}, {
    children: Object.entries(RESPONSIVE_DEVICES_MAP).map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        key = _ref3[0],
        _ref3$ = _ref3[1],
        icon = _ref3$.icon,
        label = _ref3$.label;
      return /*#__PURE__*/React.createElement(Button, {
        icon: icon,
        "data-testid": "".concat(label.toLowerCase(), "-device-button"),
        key: key,
        size: "small",
        style: "tertiary",
        title: label,
        className: classnames("neeto-molecules-device-switcher__btn", {
          "neeto-molecules-device-switcher__btn--active": key === selectedDevice
        }),
        onClick: function onClick() {
          return onDeviceChange(key);
        }
      });
    })
  }));
};

module.exports = ResponsiveDevicePicker;
//# sourceMappingURL=ResponsiveDevicePicker.js.map
