import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import classnames from 'classnames';
import Button from '@bigbinary/neetoui/Button';
import { t } from 'i18next';
import Computer from '@bigbinary/neeto-icons/Computer';
import Tablet from '@bigbinary/neeto-icons/Tablet';
import Mobile from '@bigbinary/neeto-icons/Mobile';
import { n } from './inject-css-C2dztUxs.js';
import { createElement } from 'react';
import { jsx } from '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: t("neetoMolecules.responsiveDevicePicker.desktop")
}), RESPONSIVE_DEVICES.TABLET, {
  icon: Tablet,
  label: t("neetoMolecules.responsiveDevicePicker.tablet")
}), RESPONSIVE_DEVICES.MOBILE, {
  icon: Mobile,
  label: 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-inline-start:-.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-end-end-radius:0;border-inline-start:0;border-start-end-radius:0;margin-inline-start:0}.neeto-molecules-device-switcher .neeto-ui-btn:last-child{border-end-start-radius:0;border-start-start-radius:0}.neeto-molecules-device-switcher .neeto-ui-btn:not(:first-child):not(:last-child){border-radius:0}";
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__*/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__*/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);
        }
      });
    })
  }));
};

export { ResponsiveDevicePicker as default };
//# sourceMappingURL=ResponsiveDevicePicker.js.map
