import e,{useRef as s}from"react";import r from"styled-components";import{Tag as g}from"@redocly/theme";import{Button as f}from"@redocly/theme/components/Button/Button";import{useOutsideClick as m}from"@redocly/theme/core/hooks";import c from"../utils/ansi-to-react";const u=c?.default||c,A=({onHide:a,problems:t})=>{const l=s(null);return m(l,a),e.createElement(e.Fragment,null,e.createElement(h,null),e.createElement(w,{ref:l},e.createElement(x,null,e.createElement(k,{onClick:()=>a()},"Close")),e.createElement(y,null,e.createElement(E,null,t.map((o,n)=>{const d=o.message.split(`
`)[0];return e.createElement(p,{key:n},e.createElement(R,null,e.createElement("span",null,e.createElement(v,null,n+1,".")," ",e.createElement(i,null,d)),e.createElement(g,{color:"purple",className:"tag"},o.type||"ERROR")),o.sourceFileRelativePath&&e.createElement(b,null,"at"," ",[o.sourceFileRelativePath||"",o.sourceFileLocation?.line||""].join(":")),e.createElement(C,{message:[o.message.slice(d.length+1).trim(),o.codeframe].join(`
`)}))})))))},b=r.div`
  word-break: break-all;
`,v=r.span`
  font-weight: bold;
  display: inline-block;
  width: 16px;
`,p=r.div`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  background: var(--detailed-error-message-bg-color);
  position: relative;
`,h=r.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--detailed-error-overlay-bg-color);
  opacity: var(--detailed-error-overlay-opacity);
  z-index: var(--detailed-error-overlay-z-index);
`,w=r.div`
  position: fixed;
  width: var(--detailed-error-modal-width);
  max-width: 1000px;
  height: var(--detailed-error-modal-height);
  top: var(--detailed-error-modal-top);
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--detailed-error-modal-border-radius);
  background: var(--detailed-error-modal-bg-color);
  color: var(--detailed-error-modal-color);
  box-shadow: var(--detailed-error-modal-box-shadow);
  z-index: var(--detailed-error-modal-z-index);
  font-family: var(--detailed-error-modal-font-family);
  overflow: hidden;
  padding: var(--detailed-error-modal-padding);
`,y=r.div`
  position: relative;
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: var(--detailed-error-content-height);
`,x=r.div`
  text-align: var(--detailed-error-modal-wapper-text-align);
`,k=r.button`
  border: none;
  background: none;
  color: var(--detailed-error-close-button-color);
  text-transform: var(--detailed-error-close-button-text-transform);
  cursor: pointer;
`,E=r.div`
  margin: var(--detailed-error-message-margin);
  display: flex;
  flex-direction: column;
  border-radius: var(--detailed-error-message-border-radius);
  color: var(--detailed-error-message-color);
  width: var(--detailed-error-message-width);
  font-size: var(--detailed-error-message-font-size);
  font-family: var(--detailed-error-message-font-family);
  overflow-x: auto;
  gap: var(--spacing-sm);
`;function C({message:a}){const[t,l]=e.useState(!1),o=a.split(`
`),n=t?a:o.slice(0,10).join(`
`);return e.createElement(e.Fragment,null,e.createElement(i,{useClasses:!0},n),o.length>10?e.createElement(f,{variant:"link",onClick:()=>l(!t)},t?"Show less":"Show more"):null)}const i=r(u)`
  display: block;
  white-space: pre;
  overflow: auto;
  text-wrap: wrap;

  .ansi-black-fg {
    color: #000;
  }
  .ansi-bright-black-fg {
    color: #888;
  }
  .ansi-red-fg {
    color: #ff5554;
  }
  .ansi-green-fg {
    color: #19cb00;
  }
  .ansi-yellow-fg {
    color: #cecb00;
  }
  .ansi-blue-fg {
    color: #4f67ff;
  }
  .ansi-magenta-fg {
    color: #cb1ed1;
  }
  .ansi-cyan-fg {
    color: #0dcdcd;
  }
  .ansi-white-fg {
    color: #e5e5e5;
  }
  .ansi-bright-white-fg {
    color: #fff;
  }
  .ansi-bright-red-fg {
    color: #3e0605;
  }
  .ansi-bright-green-fg {
    color: #23fd00;
  }
  .ansi-bright-yellow-fg {
    color: #fffd00;
  }
  .ansi-bright-blue-fg {
    color: #0026ff;
  }
  .ansi-bright-magenta-fg {
    color: #fd28ff;
  }
  .ansi-bright-cyan-fg {
    color: #14ffff;
  }
  .ansi-black-bg {
    background-color: #000;
  }
  .ansi-red-bg {
    background-color: #cc0403;
  }
  .ansi-green-bg {
    background-color: #19cb00;
  }
  .ansi-yellow-bg {
    background-color: #cecb00;
  }
  .ansi-blue-bg {
    background-color: #001cd1;
  }
  .ansi-magenta-bg {
    background-color: #cb1ed1;
  }
  .ansi-cyan-bg {
    background-color: #0dcdcd;
  }
  .ansi-white-bg {
    background-color: #e5e5e5;
  }
`,R=r.div`
  font-size: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  ${i} {
    font-family: var(--font-family-base);
    display: inline;
  }
`;export{A as DetailedErrors};
