import{j as e,E as D,u as o}from"./fields-wnm5Jtc6.js";import{a as p,R as x}from"./vendor-D21mNUGX.js";import{P as n,I as E,B as N,s as k}from"./index-pmrLY__j.js";import{M as P}from"./index-76LCHVw3.js";import{E as w}from"./index-DSnODHa-.js";import{g as T}from"./index.esm-DCQn2FO4.js";const S=({icon:r,isSelected:t,callback:c})=>e.jsx("div",{title:r,className:`icon ${t?"selected":""}`,onClick:()=>{c(r)},children:e.jsx(E,{icon:r,width:"24px"})});S.propTypes={icon:n.string.isRequired,isSelected:n.bool,callback:n.func};const I=({type:r,defaultIcon:t=null,callback:c})=>{const[g,d]=p.useState([]),l="https://api.iconify.design/",j=s=>{fetch(`${l}search?query=${s}&prefix=dashicons&limit=96`).then(a=>a.json()).then(a=>{d(a.icons)})},m=()=>{fetch(`${l}collection?prefix=dashicons`).then(s=>s.json()).then(s=>{let a=[];s.uncategorized.map(h=>{a.push(`dashicons-${h}`)}),d(a)})},f=()=>{if(!wp||!wp.media){alert(o("The media gallery is not available. You must admin_enqueue this function: wp_enqueue_media()"));return}const s=wp.media({title:o("Upload an Image"),library:{type:["image"]},multiple:!1});s.on("select",function(a){const u=s.state().get("selection").first().toJSON().url;c(u)}),s.open()};return p.useEffect(()=>{m()},[]),r==="image"?e.jsxs(x.Fragment,{children:[t&&D(t)&&e.jsx("div",{className:"fit-content mt-8 mb-8 p-8 with-border b-rounded",children:e.jsx("img",{src:t,alt:"",width:128})}),e.jsx("a",{href:"#",className:"mt-1 acpt-btn acpt-btn-primary-o acpt-btn-block",onClick:s=>{s.preventDefault(),s.stopPropagation(),f()},children:o("Upload an Image")})]}):r==="svg"?e.jsxs(x.Fragment,{children:[t&&t.includes("<svg")&&e.jsx("div",{className:"fit-content mt-8 mb-8 p-8 with-border b-rounded",children:e.jsx("img",{src:`data:image/svg+xml;utf8,${encodeURIComponent(t)}`})}),e.jsx("div",{className:"form-group",children:e.jsx("textarea",{className:"form-control",defaultValue:t,rows:4,onKeyUp:s=>{s.preventDefault(),s.stopPropagation(),c(s.target.value)}})})]}):e.jsxs(x.Fragment,{children:[e.jsx("div",{className:"form-group",children:e.jsx("input",{type:"text",className:"form-control",placeholder:o("Type at least 3 characters to start searching."),onChange:async s=>{const a=s.currentTarget.value;a.length===0&&m(),a.length>=3&&j(a)}})}),g.length>0&&e.jsx("div",{className:"mt-24 icon-picker-wrapper","data-cy":"icon-picker-wrapper",children:g.map(s=>e.jsx(S,{isSelected:t===s,icon:s,callback:c}))})]})};I.propTypes={type:n.string.isRequired,defaultIcon:n.string,callback:n.func};const _=({callback:r,id:t,validate:c,register:g,description:d,defaultValue:l,errors:j,upload:m=!0,svg:f=!1})=>{const s=T(j,t),[a,h]=p.useState(l),[u,v]=p.useState(!1),[y,R]=p.useState(null),C=i=>{h(i),r(i),v(!1)};p.useEffect(()=>{l!==null&&h(l)},[l]);const b=i=>{R(i),v(!u)};return e.jsxs(x.Fragment,{children:[u&&e.jsxs(P,{title:o("Choose icon"),visible:u,setVisible:v,testId:t,children:[e.jsxs("div",{className:"text-left",children:[e.jsx("label",{className:"form-label",htmlFor:"icon-picker",children:o("Select icon type from the list")}),e.jsxs("select",{"data-cy":"select-icon",onChange:i=>{i.preventDefault(),i.stopPropagation(),R(i.currentTarget.value)},defaultValue:y,className:"form-control",id:"icon-picker",children:[e.jsx("option",{value:"",children:o("--Select--")}),e.jsx("option",{value:"dashicon",children:o("Select a Dashicon")}),f&&e.jsx("option",{value:"svg",children:o("Enter custom SVG")}),m&&e.jsx("option",{value:"image",children:o("Upload an icon image")})]})]}),y&&e.jsx("div",{className:"mt-8",children:e.jsx(I,{type:y,defaultIcon:a,callback:C})})]}),e.jsxs("div",{className:"flex-center s-8",children:[a&&e.jsx(w,{value:a}),e.jsx("input",{id:t,name:t,type:"text","data-cy":"input-icon",value:a||"",className:"hidden",...g(t,c)}),e.jsxs("div",{className:"i-flex-center s-8",children:[e.jsx(N,{onClick:i=>{i.preventDefault(),i.stopPropagation(),b("dashicon")},style:k.SECONDARY,size:"sm",testId:`${t}_dashicon`,children:o("Choose icon")}),f&&e.jsx(N,{onClick:i=>{i.preventDefault(),i.stopPropagation(),b("svg")},style:k.BORDERED,size:"sm",testId:`${t}_image`,children:o("Custom SVG")}),m&&e.jsx(N,{onClick:i=>{i.preventDefault(),i.stopPropagation(),b("image")},style:k.BORDERED,size:"sm",testId:`${t}_image`,children:o("Upload an icon image")})]})]}),d&&e.jsx("div",{className:"form-description",children:d}),s&&e.jsx("div",{"data-cy":"input-error-icon",className:"invalid-feedback",children:s.message})]})};_.propTypes={id:n.string.isRequired,defaultValue:n.string,description:n.string,callback:n.func,validate:n.func,register:n.func.isRequired,errors:n.array.isRequired,svg:n.bool,upload:n.bool};export{_ as I};
