import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"../../../../helpers/typesciptCssModulesHelper.js";import r from"classnames";import l,{forwardRef as n,useMemo as s,useRef as c,useCallback as i,useEffect as a}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import p from"../../../Tooltip/Tooltip.js";import{Clickable as f}from"@vibe/clickable/mockedClassNames";import{getTestId as v}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as C}from"../../../../tests/constants.js";import I from"./ColorPickerItemComponent.module.scss.js";var g=n((function(n,g){var k=n.color,y=n.onColorClicked,E=n.colorStyle,b=void 0===E?"regular":E,j=n.shouldRenderIndicatorWithoutBackground,S=n.ColorIndicatorIcon,N=n.SelectedIndicatorIcon,h=void 0===N?S:N,L=n.isSelected,M=n.colorSize,P=n.tooltipContent,T=n.isActive,W=n.colorShape,_=n["data-testid"],x=s((function(){return m.includes(k)}),[k]),A=x?d.getMondayColorAsStyle(k,b):k,R=c(null),z=i((function(){return y(k)}),[y,k]);a((function(){if((null==R?void 0:R.current)&&!j&&x){var e=R.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(k,"selected"===b?"regular":"hover")},t=function(e){e.target.style.background=A};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[k,A,b,x,R,j]);var B=L||S,D=j?{color:A}:{};return l.createElement(p,{content:P},l.createElement("li",{className:r(I.itemWrapper,e(e(e({},I.selectedColor,L),I.active,T),I.circle,"circle"===W)),"data-testid":_||v(C.COLOR_PICKER_ITEM,k)},l.createElement("div",{className:r(I.feedbackIndicator)}),l.createElement(f,{ref:R,ariaLabel:k,className:r(I.colorItem,t(I,o("color-item-size-"+M)),e({},I.colorItemTextMode,j)),style:{background:j?"transparent":A},onClick:z,tabIndex:"-1",onMouseDown:function(e){return e.preventDefault()}},l.createElement("div",{className:r(I.colorIndicatorWrapper),style:D},B&&l.createElement(u,{icon:L?h:S,className:r(e({},I.colorIconWhite,!j)),ignoreFocusStyle:!0})))))}));export{g as default};
//# sourceMappingURL=ColorPickerItemComponent.js.map
