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

import '@components/General/Dialog';
import '@components/General/Fieldset';

@customElement('arx-calendar-event-details-dialog')
export class CalendarEventDetailsDialog extends LitElement {
  @property({ type: Object })
  event: CalendarEventData | null = null;

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

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

  static override styles = css`
    .event-detail {
      display: flex;
      gap: 0.5rem;
    }

    .event-detail-label {
      font-weight: 500;
      color: var(--color-base-content);
      min-width: 80px;
    }

    .event-detail-value {
      color: var(--color-base-content);
    }
  `;

  private handleClose() {
    this.dispatchEvent(new CustomEvent('close'));
  }

  override render() {
    if (!this.open || !this.event) return html``;

    const { end, location, description } = this.event;

    return html`
      <arx-dialog
        .open=${this.open}
        @close=${this.handleClose}
      >
        <arx-fieldset .legend=${this.event.title}>
          <div class="event-detail">
            <span class="event-detail-label">Start:</span>
            <span class="event-detail-value">${formatDateTime(this.event.start)}</span>
          </div>
          ${when(
            end instanceof Date,
            () => html`
              <div class="event-detail">
                <span class="event-detail-label">End:</span>
                <span class="event-detail-value">${formatDateTime(end!)}</span>
              </div>
            `,
          )}
          ${when(
            location,
            () => html`
              <div class="event-detail">
                <span class="event-detail-label">Location:</span>
                <span class="event-detail-value">${location}</span>
              </div>
            `,
          )}
          ${when(
            description,
            () => html`
              <div class="event-detail">
                <span class="event-detail-label">Description:</span>
                <span class="event-detail-value">${description}</span>
              </div>
            `,
          )}
        </arx-fieldset>
      </arx-dialog>
    `;
  }
}
