import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useCallback,useRef,useState}from"react";import{HexColorInput,RgbaStringColorPicker}from"react-colorful";import config from"../../../../../../nitrogen.config.js";import wysiwygColors from"../../utils/defaultWysiwygColors.js";import hexToRgba from"../../utils/hexToRgba.js";import rgba2hex from"../../utils/rgbaToHex.js";import useClickOutside from"../../utils/useClickOutside.js";import"./ColorPicker.scss";let wysiwyg_colors=wysiwygColors;config.wysiwygColors&&(wysiwyg_colors=config.wysiwygColors,wysiwyg_colors=Object.keys(wysiwyg_colors).flatMap((o=>[wysiwyg_colors[o],o])));const WYSIWYG_COLORS=wysiwyg_colors.filter(((o,r)=>r%2==0)).map((o=>hexToRgba(o)));function getColorInRgb(o){return!o||o.startsWith("rgb")?o:hexToRgba(o)}function getColorInHex(o){return o&&o.startsWith("rgb")?rgba2hex(o):o}export default function ColorPicker({color:o,onChange:r,inheritVal:e,className:s=""}){const l=useRef(null),[i,t]=useState(!1),c=useCallback((()=>t(!1)),[]);return useClickOutside(l,c),_jsxs("div",{className:`color-picker ${s} ${i?"color-picker--open":""}`,children:[_jsx("div",{className:"color-picker__container",style:{backgroundColor:o},onClick:()=>t(!0),children:_jsx("div",{className:"color-picker__container__btn  "+(e?"color-picker__container__btn--inherit-val":"")})}),i&&_jsxs("div",{className:"color-picker__panel",ref:l,children:[_jsx(RgbaStringColorPicker,{color:getColorInRgb(o),onChange:r,className:"rgba-string-color-picker"}),_jsx(HexColorInput,{className:"hex-color-input",color:getColorInHex(o),onChange:r,prefixed:!0,alpha:!0}),_jsx("div",{className:"color-picker__panel__preset-btns",children:WYSIWYG_COLORS.map(((e,s)=>_jsx("button",{className:"color-picker__panel__preset-btns__btn  "+(getColorInRgb(o)==getColorInRgb(e)?"color-picker__panel__preset-btns__btn--active border-eSecondary":""),style:{background:e},onClick:()=>r(e)},s)))})]})]})}