import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';

@customElement('icon-selector')
export class IconSelector extends LitElement {
  static styles = css`
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
      gap: 8px;
    }
    .icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid var(--sl-color-neutral-200);
      border-radius: var(--sl-border-radius-medium);
      cursor: pointer;
    }
    .icon-wrapper.selected {
      border-color: var(--sl-color-primary-500);
    }
  `;

  @property()
  selectedIcon = 'gear';

  private icons = [
    'gear',
    'file-earmark-text',
    'tag',
    'bug',
    'lightbulb',
    'rocket',
  ];

  render() {
    return html`
      <div class="icon-grid">
        ${this.icons.map(
          (icon) => html`
            <div
              class="icon-wrapper ${this.selectedIcon === icon
                ? 'selected'
                : ''}"
              @click=${() => this.selectIcon(icon)}
            >
              <sl-icon name=${icon} style="font-size: 24px;"></sl-icon>
            </div>
          `
        )}
        <div class="icon-wrapper" @click=${() => this.uploadIcon()}>
          <sl-icon name="upload" style="font-size: 24px;"></sl-icon>
        </div>
      </div>
    `;
  }

  selectIcon(icon: string) {
    this.selectedIcon = icon;
    this.dispatchEvent(new CustomEvent('icon-change', { detail: { icon } }));
  }

  uploadIcon() {
    // TODO: Implement file upload
    alert('File upload not yet implemented');
  }
}
