import { html, type TemplateResult } from '@design.estate/dees-element';
import type { DeesInputRichtext } from './component.js';

export const renderRichtext = (component: DeesInputRichtext): TemplateResult => {
      return html`
        <div class="input-wrapper">
          ${component.label ? html`<label class="label">${component.label}</label>` : ''}
          <div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
            <div class="editor-toolbar">
              ${component.renderToolbar()}
              <div class="link-input ${component.showLinkInput ? 'show' : ''}">
                <input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
                <div class="link-input-buttons">
                  <button class="primary" @click=${component.saveLink}>Save</button>
                  <button @click=${component.removeLink}>Remove</button>
                  <button @click=${component.hideLinkInput}>Cancel</button>
                </div>
              </div>
            </div>
            <div class="editor-content"></div>
            ${component.showWordCount
              ? html`
                  <div class="editor-footer">
                    <span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
                  </div>
                `
              : ''}
          </div>
          ${component.description ? html`<div class="description">${component.description}</div>` : ''}
        </div>
      `;
  
};