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

export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult => {
      return html`
        <div class="input-wrapper">
          <dees-label .label=${component.label} .description=${component.description} .required=${component.required}></dees-label>
          <div class="input-container">
            <input
              type="text"
              class="date-input ${component.isOpened ? 'open' : ''}"
              .value=${component.formatDate(component.value)}
              .placeholder=${component.placeholder}
              ?disabled=${component.disabled}
              @click=${component.toggleCalendar}
              @keydown=${component.handleKeydown}
              @input=${component.handleManualInput}
              @blur=${component.handleInputBlur}
              style="padding-right: ${component.value ? '64px' : '40px'}"
            />
            <div class="icon-container">
              ${component.value && !component.disabled ? html`
                <button class="clear-button" @click=${component.clearValue} title="Clear">
                  <dees-icon icon="lucide:x" iconSize="14"></dees-icon>
                </button>
              ` : ''}
              <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
            </div>
          </div>
        </div>
      `;

};