import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { CalendarEventData } from './CalendarEvent';

@customElement('arx-calendar-week-view')
export class CalendarWeekView extends LitElement {
  @property({ type: Date })
  currentDate = new Date();

  @property({ type: Array })
  events: CalendarEventData[] = [];

  @property({ type: String })
  locale = 'en-US';

  static override styles = css`
    .week-view {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }

    .week-day {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 1rem;
      padding: 1rem;
      background: var(--color-base-100);
      border-radius: var(--radius-selector);
    }

    .week-day-header {
      font-weight: 600;
      color: var(--color-base-content);
    }

    .week-day-content {
      min-height: 100px;
      border-left: 1px solid var(--color-base-300);
      padding-left: 1rem;
    }
  `;

  private getWeekDays(): Date[] {
    const days: Date[] = [];
    const currentDay = this.currentDate.getDay();
    const startOfWeek = new Date(this.currentDate);
    startOfWeek.setDate(this.currentDate.getDate() - currentDay);

    for (let i = 0; i < 7; i++) {
      const date = new Date(startOfWeek);
      date.setDate(startOfWeek.getDate() + i);
      days.push(date);
    }

    return days;
  }

  private getEventsForDate(date: Date): CalendarEventData[] {
    return this.events.filter((event) => {
      const eventStart = new Date(event.start);
      if (
        eventStart.getDate() === date.getDate() &&
        eventStart.getMonth() === date.getMonth() &&
        eventStart.getFullYear() === date.getFullYear()
      ) {
        return true;
      }

      if (!event.end) return false;

      const eventEnd = new Date(event.end);

      return (
        eventEnd.getDate() === date.getDate() &&
        eventEnd.getMonth() === date.getMonth() &&
        eventEnd.getFullYear() === date.getFullYear()
      );
    });
  }

  private handleEventClick(event: CalendarEventData) {
    this.dispatchEvent(new CustomEvent('event-click', { detail: { event } }));
  }

  override render() {
    return html`
      <div class="week-view">
        ${this.getWeekDays().map(
          (date) => html`
            <div class="week-day">
              <div class="week-day-header">
                ${date.toLocaleDateString(this.locale, { weekday: 'long' })}
                <br />
                ${date.toLocaleDateString(this.locale, { month: 'short', day: 'numeric' })}
              </div>
              <div class="week-day-content">
                ${this.getEventsForDate(date).map(
                  (event) => html`
                    <arx-calendar-event
                      .event=${event}
                      .locale=${this.locale}
                      @event-click=${(e: CustomEvent) => this.handleEventClick(e.detail.event)}
                    ></arx-calendar-event>
                  `,
                )}
              </div>
            </div>
          `,
        )}
      </div>
    `;
  }
}
