import { html } from 'lit';

import '../stories/preview.css';

if (!window.customElements.get('loading-element')) {
  class LoadingElement extends HTMLElement {
    connectedCallback() {
      if (this.shadowRoot) return;

      const root = this.attachShadow({ mode: 'open' });
      root.innerHTML = `
        <style>
          :host {
            display: inline-flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
          }

          .spinner {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(34, 211, 238, 0.25);
            border-top-color: rgba(34, 211, 238, 1);
            animation: spin 0.8s linear infinite;
          }

          @keyframes spin {
            to {
              transform: rotate(360deg);
            }
          }
        </style>
        <div class="spinner" aria-hidden="true"></div>
      `;
    }
  }

  window.customElements.define('loading-element', LoadingElement);
}

export const parameters = {
  layout: 'centered',
  controls: {
    expanded: true,
  },
  backgrounds: {
    default: 'slate',
    values: [
      { name: 'slate', value: '#0f1720' },
      { name: 'paper', value: '#f5efe4' },
    ],
  },
};

export const decorators = [
  (story) => {
    return html`
      <div class="story-shell">
        <div class="story-surface">${story()}</div>
      </div>
    `;
  },
];