import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';

type CalendarView = 'month' | 'week';

@customElement('arx-calendar-header')
export class CalendarHeader extends LitElement {
  @property({ type: String })
  view: CalendarView = 'month';

  @property({ type: Date })
  currentDate = new Date();

  @property({ type: Boolean })
  isToday = false;

  @property({ type: String })
  dateRange = '';

  static override styles = css`
    .calendar-header {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .calendar-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .calendar-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--color-base-content);
      text-align: center;
      flex: 1;
    }

    .calendar-controls {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .calendar-view-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }
  `;

  private handlePrev() {
    this.dispatchEvent(new CustomEvent('prev'));
  }

  private handleNext() {
    this.dispatchEvent(new CustomEvent('next'));
  }

  private handleToday() {
    this.dispatchEvent(new CustomEvent('today'));
  }

  private handleAddEvent() {
    this.dispatchEvent(new CustomEvent('add-event'));
  }

  private handleViewChange(e: CustomEvent) {
    this.dispatchEvent(new CustomEvent('view-change', { detail: { view: e.detail.checked ? 'week' : 'month' } }));
  }

  override render() {
    return html`
      <div class="calendar-header">
        <div class="calendar-title-row">
          <arx-button
            variant="secondary"
            @click=${this.handlePrev}
            label="Previous"
          ></arx-button>
          <h2 class="calendar-title">${this.dateRange}</h2>
          <arx-button
            variant="secondary"
            @click=${this.handleNext}
            label="Next"
          ></arx-button>
        </div>
        <div class="calendar-controls">
          <div class="calendar-view-toggle">
            ${when(
              !this.isToday,
              () => html`
                <arx-button
                  variant="primary"
                  @click=${this.handleToday}
                  label="Today"
                ></arx-button>
              `,
            )}
            <arx-button
              variant="primary"
              @click=${this.handleAddEvent}
              label="Add Event"
            >
              <iconify-icon icon="mdi:calendar-plus" slot="prefix"></iconify-icon>
            </arx-button>
            <arx-toggle
              label="Week View"
              .checked=${this.view === 'week'}
              @change=${this.handleViewChange}
            ></arx-toggle>
          </div>
        </div>
      </div>
    `;
  }
}
