import e,{useMemo as t,useRef as o,useCallback as r,useEffect as n}from"react";import"prop-types";import l from"classnames";import{noop as c}from"lodash-es";import{COLOR_STYLES as a,contentColors as i}from"../../../../utils/colors-vars-map.js";import s from"../../../../utils/colors-utils.js";import"./ColorPickerItemComponent.scss.js";import m from"../../../Icon/Icon.js";import u from"../../../Tooltip/Tooltip.js";import d from"../../../Clickable/Clickable.js";import{COLOR_SHAPES as p}from"../../ColorPickerConstants.js";import{getTestId as f}from"../../../../tests/testIds.js";var v=function(c){var v=c.color,E=c.onValueChange,C=c.colorStyle,g=void 0===C?a.REGULAR:C,k=c.shouldRenderIndicatorWithoutBackground,I=c.ColorIndicatorIcon,L=c.SelectedIndicatorIcon,y=c.isSelected,S=c.colorSize,b=c.tooltipContent,j=c.isActive,h=c.colorShape,R=c["data-testid"],A=t((function(){return i.includes(v)}),[v]),N=A?s.getL3velsColorAsStyle(v,g):v,w=o(null),x=r((function(e){return e.preventDefault()}),[]),D=r((function(){return E(v)}),[E,v]);n((function(){if(null!=w&&w.current&&!k&&A){var e=w.current,t=function(e){e.target.style.background=s.getL3velsColorAsStyle(v,g===a.SELECTED?a.REGULAR:a.HOVER)},o=function(e){e.target.style.background=N};return e.addEventListener("mouseenter",t,!1),e.addEventListener("mouseleave",o,!1),function(){e.removeEventListener("mouseenter",t,!1),e.removeEventListener("mouseleave",o,!1)}}}),[v,N,g,A,w,k]);var P=y||I,T=k?{color:N}:{};return e.createElement(u,{content:b},e.createElement("li",{className:l("l3-style-color-item-wrapper",{"selected-color":y,active:j,circle:h===p.CIRCLE}),"data-testid":R||f("color-picker-item",v)},e.createElement("div",{className:"feedback-indicator"}),e.createElement(d,{ref:w,ariaLabel:v,className:l("color-item","color-item-size-".concat(S),{"color-item-text-mode":k}),style:{background:k?"transparent":N},onClick:D,tabIndex:"-1",onMouseDown:x},e.createElement("div",{className:"color-indicator-wrapper",style:T},P&&e.createElement(m,{icon:y?L:I,className:l({"color-icon-white":!k}),ignoreFocusStyle:!0})))))};v.defaultProps={onValueChange:c};var E=v;export{E as default};
