import { __decorate } from "tslib";
import { attr, customElement, GenesisElement, observable, html, css, repeat, when, } from '@genesislcap/web-core';
const PILL_ANIMATION_STAGGER_MS = 70;
const template = html `
  ${when((x) => x.state.status === 'loading', html `
      <div class="suggestions-container">
        ${repeat(() => Array.from({ length: 3 }), html `
            <div class="suggestion-placeholder"></div>
          `)}
      </div>
    `)}
  ${when((x) => x.state.status === 'loaded', html `
      <div class="suggestions-container">
        ${repeat((x) => x.state.suggestions, html `
            <button
              class="suggestion-pill"
              style="animation-delay: ${(_, c) => c.index * PILL_ANIMATION_STAGGER_MS}ms"
              @click="${(suggestion, c) => c.parent.handleSuggestionClick(suggestion)}"
            >
              ${(suggestion) => suggestion}
            </button>
          `)}
      </div>
    `)}
`;
const styles = css `
  :host {
    /* Collapsed unless there is something to render (see hasContent), so the empty
       host never occupies space or shows through a consumer's border as a stray
       line. */
    display: none;
  }

  :host([has-content]) {
    display: block;
  }

  .suggestions-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
    background-color: var(--neutral-layer-2);
    animation: suggestions-appear 0.2s ease-out both;
  }

  @keyframes suggestions-appear {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .suggestion-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, var(--neutral-layer-3));
    color: var(--neutral-foreground-rest);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 25%, var(--neutral-stroke-rest));
    border-radius: 20px;
    font-family: var(--body-font);
    font-size: 0.85em;
    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      transform 0.15s ease,
      box-shadow 0.15s ease;
    animation: pill-appear 0.3s ease-out both;
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  .suggestion-pill:hover {
    background: color-mix(in srgb, var(--accent-fill-rest) 20%, var(--neutral-layer-3));
    border-color: color-mix(in srgb, var(--accent-fill-rest) 50%, var(--neutral-stroke-rest));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
  }

  .suggestion-pill:active {
    transform: translateY(0);
    box-shadow: none;
  }

  @keyframes pill-appear {
    from {
      opacity: 0;
      transform: scale(0.88) translateY(4px);
    }

    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .suggestion-placeholder {
    height: 30px;
    width: 110px;
    background: var(--neutral-layer-3);
    border-radius: 20px;
    animation: placeholder-pulse 1.6s ease-in-out infinite;
  }

  .suggestion-placeholder:nth-child(2) {
    width: 150px;
    animation-delay: 0.25s;
  }

  .suggestion-placeholder:nth-child(3) {
    width: 130px;
    animation-delay: 0.5s;
  }

  @keyframes placeholder-pulse {
    0%,
    100% {
      opacity: 0.35;
    }

    50% {
      opacity: 0.65;
    }
  }
`;
let ChatSuggestions = class ChatSuggestions extends GenesisElement {
    constructor() {
        super(...arguments);
        this.state = { status: 'idle' };
        /**
         * Reflected to a `has-content` attribute so the host can collapse when there is
         * nothing to render. True only while loading or when loaded with at least one
         * suggestion; idle, errored, and empty-loaded states render nothing.
         */
        this.hasContent = false;
    }
    stateChanged() {
        const s = this.state;
        this.hasContent = s.status === 'loading' || (s.status === 'loaded' && s.suggestions.length > 0);
    }
    handleSuggestionClick(suggestion) {
        this.$emit('suggestion-clicked', suggestion);
    }
};
__decorate([
    observable
], ChatSuggestions.prototype, "state", void 0);
__decorate([
    attr({ attribute: 'has-content', mode: 'boolean' })
], ChatSuggestions.prototype, "hasContent", void 0);
ChatSuggestions = __decorate([
    customElement({
        name: 'chat-suggestions',
        template,
        styles,
    })
], ChatSuggestions);
export { ChatSuggestions };
