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

export interface IDateService {
  parseISO(dateStr: string): Date;
  getDayName(date: Date, format: 'short' | 'long'): string;
}

export const defaultDateService: IDateService = {
  parseISO: (str) => new Date(str),
  getDayName: (date, format) => date.toLocaleDateString('da-DK', { weekday: format })
};

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

  constructor(private dateService: IDateService = defaultDateService) {}

  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);
    }
  }
}