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

export interface CalendarEventData {
  id: string;
  title: string;
  start: Date;
  end?: Date;
  description: string;
  location?: string;
  participants?: string[];
  tags?: string[];
  type: 'date' | 'time';
}

@customElement('arx-calendar-event')
export class CalendarEvent extends LitElement {
  @property({ type: Object })
  event!: CalendarEventData;

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

  static override styles = css`
    .calendar-event {
      background: var(--color-primary);
      color: var(--color-primary-content);
      padding: 0.25rem;
      margin: 0.25rem 0;
      border-radius: var(--radius-selector);
      font-size: 0.875rem;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    .event-time {
      font-size: 0.75rem;
      opacity: 0.8;
    }
  `;

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

  override render() {
    return html`
      <div class="calendar-event" @click=${this.handleClick}>
        ${this.event.title}
        ${when(
          this.event.type === 'time',
          () => html`
            <div class="event-time">
              ${this.event.start.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit' })}
              ${when(
                this.event.end,
                () =>
                  html` - ${this.event.end!.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit' })}`,
              )}
            </div>
          `,
        )}
      </div>
    `;
  }
}
