import e from"react";import u from"styled-components";import{Tooltip as X}from"@redocly/theme/components/Tooltip/Tooltip";import{CheckmarkFilledIcon as H}from"@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon";import{DraggableIcon as O}from"@redocly/theme/icons/DraggableIcon/DraggableIcon";import{ErrorFilledIcon as N}from"@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon";import{Button as U}from"@redocly/theme/components/Button/Button";import{DetailedErrors as G}from"./DetailedErrors";import{useSocketMessages as T}from"../../runtime/useSocketMessages";const V="pages-updated",W="errors-updated",P=99,f=24,k="portal.dev-mode-floating-bar-slot",K=280,w="bottom-left",R=["bottom-left","middle","bottom-right"];function Y(t,a){const s=a/2;return{minX:s+f,maxX:t-s-f}}function j(t,a){switch(t){case"bottom-left":return a.minX;case"bottom-right":return a.maxX;default:return(a.minX+a.maxX)/2}}function q(t){return typeof t=="string"&&R.includes(t)}function J(){if(typeof window>"u")return w;try{const t=localStorage.getItem(k);return q(t)?t:w}catch{return w}}function de(){const[t,a]=e.useState(0),[s,z]=e.useState([]),[B,E]=e.useState(!1),[l,v]=e.useState(!1),[c,L]=e.useState(J),[p,b]=e.useState(null),S=e.useRef(0),g=e.useRef(null),h=e.useRef(null);T(V,r=>a(r.pages)),T(W,r=>z(r.errors));const y=e.useCallback(()=>h.current?.getBoundingClientRect().width||K,[]),d=e.useCallback(()=>Y(window.innerWidth,y()),[y]),x=e.useCallback(r=>{const o=d();return Math.min(Math.max(o.minX,r),o.maxX)},[d]),D=e.useCallback(r=>{const o=d();return R.map(n=>{const i=j(n,o),$=Math.abs(i-r);return{slot:n,distance:$}}).sort((n,i)=>n.distance-i.distance)[0].slot},[d]);e.useEffect(()=>{if(!(typeof window>"u"))try{localStorage.setItem(k,c)}catch{return}},[c]),e.useEffect(()=>{if(!l)return;const r=n=>{const i=x(n.clientX-S.current);g.current=i,b(i)},o=()=>{v(!1);const n=g.current||0,i=D(n);L(i),b(null),g.current=null};return window.addEventListener("pointermove",r),window.addEventListener("pointerup",o),window.addEventListener("pointercancel",o),()=>{window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",o),window.removeEventListener("pointercancel",o)}},[x,D,l,c]);const M=r=>{if(r.button!==0)return;const o=h.current?.getBoundingClientRect();if(!o)return;const n=o.left+o.width/2;S.current=r.clientX-n,g.current=n,b(n),v(!0),r.preventDefault()},_=e.useMemo(()=>{if(l&&p!==null)return{left:`${p}px`,right:"auto",transform:"translateX(-50%)"};switch(c){case"middle":return{left:"50%",right:"auto",transform:"translateX(-50%)"};case"bottom-right":return{left:"auto",right:`${f}px`,transform:"none"};default:return{left:`${f}px`,right:"auto",transform:"none"}}},[p,l,c]);if(!t&&!s.length)return null;const A=s.length>P?`${P}+`:s.length,m=s.length>0,I=m?"Problems":"No problems",F=c==="bottom-left"?"left":c==="bottom-right"?"right":"center";return e.createElement(e.Fragment,null,e.createElement(Q,{ref:h,$isDragging:l,style:_},e.createElement(X,{tip:"Drag to move",placement:"top",arrowPosition:F,disabled:l},e.createElement(Z,{type:"button","aria-label":"Drag floating bar",onPointerDown:M,$isDragging:l},e.createElement(O,{size:"14px",color:"var(--color-warm-grey-5)"}))),e.createElement(ee,{"aria-label":"Total number of pages in documentation"},e.createElement(C,null,t),e.createElement(te,null,"pages")),e.createElement(X,{tip:I,placement:"top"},e.createElement(re,{type:"button",variant:"secondary",size:"small",icon:m?e.createElement(N,{size:"14px",color:"var(--color-raspberry-6)"}):e.createElement(H,{size:"14px",color:"var(--color-green-6)"}),"aria-label":m?"Show detailed error message":"No errors",onClick:()=>m&&E(!0)},e.createElement(C,null,A)))),B&&e.createElement(G,{onHide:()=>E(!1),problems:s}))}const Q=u.div`
  position: fixed;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--color-warm-grey-10);
  color: var(--color-warm-grey-1);
  border-radius: var(--border-radius-lg);
  bottom: var(--spacing-lg);
  padding: var(--spacing-xxs);
  box-shadow: var(--bg-raised-shadow);
  z-index: var(--z-index-raised);
  user-select: none;
  cursor: ${({$isDragging:t})=>t?"grabbing":"default"};
`,Z=u.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  height: var(--line-height-base);
  cursor: ${({$isDragging:t})=>t?"grabbing":"grab"};
`,ee=u.div`
  display: inline-flex;
  align-items: center;
  padding-right: var(--spacing-xs);
  gap: var(--spacing-xxs);
  white-space: nowrap;
  line-height: var(--line-height-base);
`,te=u.span`
  font-size: var(--font-size-base);
`,C=u.span`
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
`,re=u(U)`
  --button-bg-color-secondary: var(--color-warm-grey-8);
  --button-bg-color-secondary-hover: var(--color-warm-grey-7);
  --button-bg-color-secondary-pressed: var(--color-warm-grey-6);
  --button-color: var(--color-warm-grey-3);
  --button-color-hover: var(--color-warm-grey-3);
  --button-padding: 1px 6px;
`;export{de as DevModeFloatingBar};
