import { IGroupingRenderer } from '../../core/IGroupingRenderer';
import { RenderContext } from '../../core/RenderContext';
import { DateService } from '../../core/DateService';

export class DateRenderer implements IGroupingRenderer {
  readonly type = 'date';

  constructor(private dateService: DateService) {}

  render(context: RenderContext): void {
    for (const dateStr of context.values) {
      const date = this.dateService.parseISO(dateStr);

      const headerCell = document.createElement('swp-day-header');
      headerCell.dataset.date = dateStr;
      headerCell.innerHTML = `
        <swp-day-name>${this.dateService.getDayName(date, 'short')}</swp-day-name>
        <swp-day-date>${date.getDate()}</swp-day-date>
      `;
      context.headerContainer.appendChild(headerCell);

      const column = document.createElement('swp-day-column');
      column.dataset.date = dateStr;
      if (context.parentId) column.dataset.parentId = context.parentId;
      column.innerHTML = '<swp-events-layer></swp-events-layer>';
      context.columnContainer.appendChild(column);
    }
  }
}