"use client"
import{c as N}from"./chunk-PQOFULZM.mjs";import{a as T}from"./chunk-6X4BTDOA.mjs";import{d as B,f as F}from"./chunk-FSCE46DQ.mjs";import{a as w}from"./chunk-4KAIJ2PN.mjs";import{a as M}from"./chunk-T3ITI5FJ.mjs";import{a as _}from"./chunk-U4QIRPVU.mjs";import{a as P}from"./chunk-RKUUDTHF.mjs";import{a as C}from"./chunk-3IVWKAUU.mjs";import{a as S}from"./chunk-GHXIGUPQ.mjs";import{b as x,c as g,l as u}from"./chunk-W3HKWIX4.mjs";import{Fragment as k,useCallback as I,useEffect as z,useId as L,useMemo as U,useState as $}from"react";import{jsx as t,jsxs as m}from"react/jsx-runtime";var i=[{key:"utm_source",icon:C,label:"Source",placeholder:"google",shortcut:"S"},{key:"utm_medium",icon:w,label:"Medium",placeholder:"cpc",shortcut:"M"},{key:"utm_campaign",icon:S,label:"Campaign",placeholder:"summer_sale",shortcut:"C"},{key:"utm_term",icon:P,label:"Term",placeholder:"running shoes",shortcut:"T"},{key:"utm_content",icon:_,label:"Content",placeholder:"logolink",shortcut:"O"},{key:"ref",icon:M,label:"Referral",placeholder:"google",shortcut:"R"}];function J({url:s,setUrl:p,setValue:b}){let c=L(),r=U(()=>x(s),[s]),[l,f]=$(i.filter(({key:e})=>r[e]).map(({key:e})=>e)),[d,h]=$(null),y=U(()=>i.filter(({key:e})=>r[e]||l.includes(e)),[r,l]),v=I(e=>{Boolean(r[e])||l.includes(e)?(f(a=>a.filter(n=>n!==e)),b(e,""),p(g(s,{...r,[e]:""}))):(f(a=>[...a,e]),h(e))},[r,l,s]);return z(()=>{if(d){let e=document.getElementById(`${c}-${d}`);e&&e.focus({preventScroll:!0}),h(null)}},[d]),N(i.map(({shortcut:e})=>e),e=>{let o=i.find(({shortcut:a})=>a===e.key);!o||v(o.key)},{modal:!0}),m("div",{children:[m("div",{className:"flex items-center gap-2",children:[t("span",{className:"block text-sm font-medium text-gray-700",children:"UTM Builder"}),t(F,{content:t(B,{title:"Add UTM parameters to your short links for conversion tracking.",cta:"Learn more.",href:"https://dub.co/help/article/utm-builder"})})]}),t("div",{className:"mt-2 flex flex-wrap items-center gap-2",children:i.map(({key:e,icon:o,label:a})=>{let n=Boolean(r[e])||l.includes(e);return m("button",{type:"button","aria-pressed":n,className:u("flex items-center gap-1 px-2.5 py-1.5 text-sm drop-shadow-sm transition-all","rounded-md border border-gray-300 bg-white text-gray-700","disabled:pointer-events-none disabled:opacity-70",n?"border-gray-600 bg-gray-100 ring-1 ring-inset ring-gray-600":"hover:bg-gray-50 active:bg-gray-100"),onClick:()=>v(e),children:[t(o,{className:"size-4"}),t("span",{children:a})]},e)})}),t(T,{height:!0,transition:{ease:"easeInOut",duration:.1},className:"-mx-1 px-1",children:t("div",{className:u("grid grid-cols-[min-content_1fr] gap-y-2 text-sm text-gray-700",y.length>0&&"pb-1 pt-6"),children:y.map(({key:e,icon:o,placeholder:a})=>m(k,{children:[m("div",{className:"flex items-center gap-1.5 rounded-l-md border-y border-l border-gray-300 bg-gray-100 py-2.5 pl-2 pr-3 sm:min-w-36",children:[t(o,{className:"size-4 shrink-0"}),t("label",{htmlFor:`${c}-${e}`,className:"font-mono text-sm",children:e})]}),t("input",{type:"text",id:`${c}-${e}`,placeholder:a,className:"h-full min-w-0 grow rounded-r-md border border-gray-300 placeholder-gray-400 focus:border-gray-500 focus:ring-gray-500 sm:text-sm",value:r[e]||"",onChange:n=>{b(e,n.target.value),p(g(s,{...r,[e]:n.target.value}))}})]},e))})})]})}export{J as a};
