import { html, ref, repeat, slotted, when } from '@genesislcap/web-core';
const genesisIconTemplate = html `
  <svg
    viewBox="-4 0 30 26"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    style="width:60%;height:60%"
  >
    <path
      d="M18.7702 23.0437C18.7702 22.4675 18.8526 21.8089 19.0995 21.3149C19.3465 20.7386 19.6758 20.2447 20.0874 19.833C20.4991 19.4214 20.993 19.0921 21.5693 18.8451C22.1456 18.5982 22.7219 18.5158 23.2981 18.5158H25.9326V11.6828H19.1819V14.3172C19.1819 15.5521 18.6879 16.7047 17.8647 17.5279C17.0414 18.3512 15.8888 18.8451 14.7363 18.9275H6.7507V6.99025H16.4651V0.157227H3.54C2.63442 0.157227 1.72884 0.568855 1.07023 1.22746C0.411628 1.88606 0 2.79165 0 3.77955V22.2205C0 23.1261 0.411628 24.0316 1.07023 24.7726C1.72884 25.4312 2.63442 25.8428 3.54 25.8428H18.7702V23.0437Z"
      fill="currentColor"
    />
  </svg>
`;
export const AiChatBubbleTemplate = () => {
    return html `
    ${when((x) => !x.dialogOpen, html `
        <div
          class="bubble ${(x) => (x.hovered ? 'hovered' : '')}"
          style="${(x) => `translate: ${x.bubbleLeft}px ${x.bubbleTop}px`}"
          ${ref('bubbleEl')}
          @mousedown="${(x, c) => x.onBubbleMouseDown(c.event)}"
          @mouseenter="${(x) => x.onBubbleMouseEnter()}"
          @mouseleave="${(x) => x.onBubbleMouseLeave()}"
        >
          ${when((x) => !!x.imageSrc, html `
              <img src="${(x) => x.imageSrc}" alt="AI" draggable="false" />
            `)}
          ${when((x) => !x.imageSrc, genesisIconTemplate)}
          <div class="pulse-ring"></div>
          <div class="tooltip" style="${(x) => x.tooltipStyle}" ${ref('tooltipEl')}>
            ${(x) => x.title}
          </div>
        </div>
      `)}
    ${repeat(
    // Pass the component instance as the sole array item so inner bindings
    // can use x directly. recycle: false ensures a fresh element on every
    // open, preventing stale .closing class or animationend listeners from
    // a previous close persisting on the reused view.
    (x) => (x.dialogOpen ? [x] : []), html `
        <div
          class="dialog"
          style="${(x) => `translate: ${x.dialogLeft}px ${x.dialogTop}px; width: ${x.dialogWidth}px; height: ${x.dialogHeight}px`}"
          @chat-header-mousedown="${(x, c) => x.onDialogHeaderMouseDown(c.event)}"
          ${ref('dialogEl')}
        >
          <div class="dialog-content">
            <slot name="dialog-content" ${slotted('dialogContent')}></slot>
          </div>
        </div>
      `, { recycle: false })}
  `;
};
