Eve/src/components/Calendar/CalendarEventDialog.ts

import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { type Ref, createRef, ref } from 'lit/directives/ref.js';
import { when } from 'lit/directives/when.js';

import '@components/General/Button';
import { StyledInput } from '@components/General/Input';
import { StyledTextarea } from '@components/General/Textarea';
import { StyledToggle } from '@components/General/Toggle';
import type { EveDialog } from '../General/Dialog';

interface InputEvent extends Event {
  detail: {
    value: string;
  };
}

@customElement('arx-calendar-event-dialog')
export class CalendarEventDialog extends LitElement {
  @property({ type: Boolean })
  open = false;

  dialogRef: Ref<EveDialog> = createRef();

  @state()
  private newEvent = {
    title: '',
    description: '',
    location: '',
    startDate: '',
    startTime: '',
    endDate: '',
    endTime: '',
    allDay: false,
    participants: [] as string[],
    tags: [] as string[],
  };

  static override styles = css`
    .form-input {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid var(--color-base-300);
      border-radius: var(--radius-selector);
      background: var(--color-base-200);
      color: var(--color-base-content);
    }

    .form-row {
      display: flex;
      gap: 1rem;
    }
  `;

  private handleClose() {
    this.dialogRef.value?.close(false);
    this.dispatchEvent(new CustomEvent('close', { bubbles: false }));
  }

  private handleInputChange(e: Event) {
    if (e.target instanceof StyledToggle) {
      const checked = e.target.checked;
      this.newEvent = {
        ...this.newEvent,
        [e.target.name]: checked,
      };
    } else if (e.target instanceof StyledTextarea || e.target instanceof StyledInput) {
      const inputEvent = e as InputEvent;
      this.newEvent = {
        ...this.newEvent,
        [e.target.name]: inputEvent.detail.value,
      };
    }
  }

  private handleSubmit(e: Event) {
    e.preventDefault();
    this.dispatchEvent(new CustomEvent('submit', { detail: { event: this.newEvent } }));
  }

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

    return html`
      <arx-dialog ${ref(this.dialogRef)} width="500px" title="Add Event" .open=${this.open} @close=${this.handleClose}>
        <arx-fieldset legend="Title">
          <arx-input
            type="text"
            name="title"
            .value=${this.newEvent.title}
            @change=${this.handleInputChange}
            required
          ></arx-input>
        </arx-fieldset>
        <arx-fieldset legend="Description">
          <arx-textarea
            name="description"
            .value=${this.newEvent.description}
            @change=${this.handleInputChange}
          ></arx-textarea>
        </arx-fieldset>
        <arx-fieldset legend="Location">
          <arx-input
            type="text"
            name="location"
            .value=${this.newEvent.location}
            @change=${this.handleInputChange}
          ></arx-input>
        </arx-fieldset>
        <arx-fieldset>
          <arx-toggle
            label="All-day event"
            name="allDay"
            .checked=${this.newEvent.allDay}
            @change=${this.handleInputChange}
          ></arx-toggle>
        </arx-fieldset>
        <div class="form-row">
          <arx-fieldset legend="Start Date">
            <arx-input
              type="date"
              name="startDate"
              .value=${this.newEvent.startDate}
              @change=${this.handleInputChange}
              required
            ></arx-input>
          </arx-fieldset>
          ${when(
            !this.newEvent.allDay,
            () => html`
              <arx-fieldset legend="Start Time">
                <arx-input
                  type="time"
                  name="startTime"
                  .value=${this.newEvent.startTime}
                  @change=${this.handleInputChange}
                  required
                ></arx-input>
              </arx-fieldset>
            `,
          )}
        </div>
        <div class="form-row">
          <arx-fieldset legend="End Date">
            <arx-input
              type="date"
              name="endDate"
              .value=${this.newEvent.endDate}
              @change=${this.handleInputChange}
            ></arx-input>
          </arx-fieldset>
          ${when(
            !this.newEvent.allDay,
            () => html`
              <arx-fieldset legend="End Time">
                <arx-input
                  type="time"
                  name="endTime"
                  .value=${this.newEvent.endTime}
                  @change=${this.handleInputChange}
                  ?required=${this.newEvent.endDate !== ''}
                ></arx-input>
              </arx-fieldset>
            `,
          )}
        </div>
        <div class="dialog-footer">
          <arx-button variant="secondary" @click=${this.handleClose} label="Cancel"></arx-button>
          <arx-button variant="primary" @click=${this.handleSubmit} type="submit" label="Create Event"></arx-button>
        </div>
      </arx-dialog>
    `;
  }
}