import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

export type MentionItem = { key: string; label: string };

@customElement('nile-rte-mentions-item')
export class NileRteMentionsItem extends LitElement {
  protected createRenderRoot() { return this; }  

 
  @property({ attribute: 'mentionscharacter', reflect: true })
  mentionsCharacter: string = '';

 
  @property({ attribute: 'mentionscolor', reflect: true })
  mentionsColor: string = '';  
 

@property({ attribute: 'mentionsprefix', reflect: true })  mentionsPrefix: string = '';
@property({ attribute: 'mentionssuffix', reflect: true })  mentionsSuffix: string = '';


  @property({
    attribute: 'mentionsdata',
    reflect: true,
    converter: {
      fromAttribute: (value: string | null): MentionItem[] => {
        if (!value) return [];
        try {
          const parsed = JSON.parse(value);
          return Array.isArray(parsed)
            ? parsed.filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
            : [];
        } catch { return []; }
      },
      toAttribute: (v: MentionItem[]) => JSON.stringify(v ?? []),
    }
  })
  mentionsData: MentionItem[] = [];
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-rte-mentions-item': NileRteMentionsItem;
  }
}