import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { useRef, useState, useEffect } from 'react';
import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var verticalItem = "verticalItem-NmQDx";
var wcSpan = "wcSpan-0wnmJ";
var verticalItemPoligon = "verticalItemPoligon-M44lA";
var wcActiveStep = "wcActiveStep-ykv3D";
var wcVisitedStep = "wcVisitedStep-qDdfW";
var wcStepIcon = "wcStepIcon-7hz1S";
var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n  transition:\n    fill 0.3s ease,\n    color 0.3s ease;\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedIcon, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
styleInject(css_248z);

var getIconOfTabGroup = function getIconOfTabGroup(tabGroup, baseCdnUrl, tabGroupObj) {
  var sirvURL = baseCdnUrl + '/static/images/TabIcons/';
  if (tabGroupObj) {
    if (tabGroupObj[tabGroup.toLowerCase()]) return sirvURL + tabGroupObj[tabGroup.toLowerCase()];else if (tabGroupObj[tabGroup]) return sirvURL + tabGroupObj[tabGroup];
  }
  switch (tabGroup) {
    case 'StaticRoomList':
      return sirvURL + 'room.svg';
    case 'Planner':
    case 'PRODUCTS':
    case 'PROMOTED':
      return sirvURL + 'planner.svg';
    case 'Summary':
      return sirvURL + 'summary.svg';
    case 'Piede':
    case 'pieds':
    case 'Fuss':
    case 'Fuß':
    case 'Fu':
    case 'Fsse':
      return sirvURL + 'feet.svg';
    case 'Testiera':
    case 'tte de lit':
    case 'Kopfteil':
    case 'Headboard':
      return sirvURL + 'bed_headboard.svg';
    case 'materasso':
    case 'matelas':
    case 'Matratze':
    case 'Matratze Zubehr':
      return sirvURL + 'mattress.svg';
    case 'dimensioni':
    case 'dimension':
    case 'Grsse':
      return sirvURL + 'dimensions.svg';
    case 'Topper':
    case 'surmatelas':
      return sirvURL + 'topper.svg';
    case 'Telaio inferiore':
    case 'box':
    case 'Untergestell':
    case 'Box/Untergestell':
    case 'BoxUntergestell':
    case 'Box  Bettrahmen':
    case 'box  cadre de lit':
    case 'Box':
    case 'Box inkl Grsse':
      return sirvURL + 'bed_underframe.svg';
    case 'Visualizzazione':
    case 'visualisation':
    case 'Visualisierung':
      return sirvURL + 'bed_visualization.svg';
    case 'Rivestimento':
    case 'tissu dco':
    case 'Bezug':
    case 'Stoff':
      return sirvURL + 'upholstery.svg';
    case 'Sitz':
    case 'Sitztiefe':
      return sirvURL + 'seat.svg';
    case 'Armlehne':
      return sirvURL + 'armrest.svg';
    case 'ACCESSOIRES':
      return sirvURL + 'additionalArticles.svg';
    case 'Rcken':
      return sirvURL + 'sofaBackrest.svg';
    case 'Konfiguration':
      return sirvURL + 'material_config.svg';
    case 'Zustand':
      return sirvURL + 'settings_suggest.svg';
  }
  return undefined;
};

var getShapePoints = function getShapePoints(w, h, first, last) {
  if (first && last) return [[0, h], [0, 0], [w, 0], [w, h]];
  if (first) return [[0, h - 8], [0, 0], [w, 0], [w, h - 8], [64, h]];
  if (last) return [[0, h], [0, 0], [64, 8], [w, 0], [w, h]];
  return [[0, h - 8], [0, 0], [64, 8], [w, 0], [w, h - 8], [64, h]];
};
var getRoundedPath = function getRoundedPath(points, radius) {
  var n = points.length;
  var parts = [];
  for (var i = 0; i < n; i++) {
    var prev = points[(i - 1 + n) % n];
    var curr = points[i];
    var next = points[(i + 1) % n];
    var dx1 = prev[0] - curr[0],
      dy1 = prev[1] - curr[1],
      len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
    var dx2 = next[0] - curr[0],
      dy2 = next[1] - curr[1],
      len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
    var r = Math.min(radius, len1 / 2, len2 / 2);
    var sx = curr[0] + dx1 / len1 * r,
      sy = curr[1] + dy1 / len1 * r;
    var ex = curr[0] + dx2 / len2 * r,
      ey = curr[1] + dy2 / len2 * r;
    parts.push(i === 0 ? "M".concat(sx, " ").concat(sy) : "L".concat(sx, " ").concat(sy));
    parts.push("Q".concat(curr[0], " ").concat(curr[1], " ").concat(ex, " ").concat(ey));
  }
  parts.push('Z');
  return parts.join(' ');
};
var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
  var _getIconOfTabGroup;
  var tabGroup = _ref.tabGroup,
    height = _ref.height,
    _ref$minHeight = _ref.minHeight,
    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
    isFirstItem = _ref.isFirstItem,
    isLastItem = _ref.isLastItem,
    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
    _ref$wcStepIconClass = _ref.wcStepIconClass,
    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
    lastItemDiv = _ref.lastItemDiv;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var width = 128;
  var tabGroupItemRef = useRef(null);
  var _useState = useState(8),
    _useState2 = _slicedToArray(_useState, 2),
    borderRadius = _useState2[0],
    setBorderRadius = _useState2[1];
  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
  if (height < minHeight) {
    height = minHeight;
  }
  var _useDivaCore = useDivaCore(),
    baseCdnUrl = _useDivaCore.state.apiConfig.baseCdnUrl;
  useEffect(function () {
    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
    if (tabGroupItemRef.current) {
      var raw = getComputedStyle(tabGroupItemRef.current).getPropertyValue('--globalBorderRadius').trim();
      if (raw) {
        var parsed = parseFloat(raw);
        if (!isNaN(parsed)) setBorderRadius(parsed);
      }
    }
  }, [tabGroupItemRef]);
  var onTabGroupClick = function onTabGroupClick(tabGroup) {
    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
  };
  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
  var shapePoints = getShapePoints(width, height, !!isFirstItem, !!isLastItem);
  var pathData = getRoundedPath(shapePoints, borderRadius);
  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, baseCdnUrl, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
  var div = /*#__PURE__*/jsxs("div", {
    "data-test-id": "tabGroupItem",
    children: [/*#__PURE__*/jsx("div", {
      className: wcStepIconClass,
      style: {
        WebkitMaskImage: 'url(' + icon + ')',
        maskImage: 'url(' + icon + ')'
      }
    }), /*#__PURE__*/jsx("span", {
      "data-test-id": "tabGroupItemTitle",
      children: t('configurator.' + tabGroup.title, tabGroup.title)
    })]
  });
  if (isLastItem && lastItemDiv) {
    div = lastItemDiv;
  }
  return /*#__PURE__*/jsxs("svg", {
    "data-test-id": "tabGroupItemSvg",
    viewBox: '0 0 ' + width + ' ' + height,
    ref: tabGroupItemRef,
    style: {
      height: height + 'px',
      minHeight: minHeight
    },
    onClick: function onClick() {
      return onTabGroupClick(tabGroup);
    },
    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
    children: [/*#__PURE__*/jsx("path", {
      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
      d: pathData
    }), /*#__PURE__*/jsx("foreignObject", {
      width: "100%",
      height: "100%",
      style: {
        pointerEvents: 'none'
      },
      children: /*#__PURE__*/jsx("span", {
        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
        children: div
      })
    })]
  });
};
var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);

export { VerticalTabGroupItemStandard$1 as default };
