<template>
  <img id="header-splash" src="../assets/welcome-wood.jpg" />
  <div id="event-proposal" :class="[formState]">
    <header>
      <h1>Propose an Event</h1>
      <h2>Hope Family Fellowship</h2>
    </header>
    <form @submit.prevent="proposeEvent">
      <fieldset :disabled="formState !== 'ready' && formState !== 'invalid'">
        <label>
          <span>Event Name</span>
          <input
            type="text"
            name="name"
            placeholder="e.g. Men's Bible Study"
            v-model="formVal.event.name"
          />
        </label>
        <label>
          <span>Date and time</span>
          <input type="date" name="date" v-model="formVal.event.date" />
        </label>
        <label>
          <span>Department / Event Type</span>
          <select name="department" v-model="formVal.event.department">
            <option value="">--- select a department or type ---</option>
            <option
              v-for="opt in departments"
              :key="opt.value"
              class="color-{{opt.color}}"
            >
              {{ opt.value }}
            </option>
          </select>
        </label>
        <label>
          <span>Owner</span>
          <input type="text" name="owner" v-model="formVal.event.owner" />
        </label>
        <label>
          <span>Location</span>
          <textarea v-model="formVal.event.location"></textarea>
        </label>
        <label>
          <span>Purpose</span>
          <textarea v-model="formVal.event.purpose"></textarea>
        </label>
        <label>
          <span>Description</span>
          <textarea v-model="formVal.event.description"></textarea>
        </label>
        <div class="invalid-message" v-if="formState === 'invalid'">
          All fields are required.
        </div>
        <div class="actions">
          <button type="submit">
            <span v-if="formState === 'ready' || formState === 'invalid'"
              >Propose Event</span
            >
            <span v-if="formState === 'submitting'">
              <SpinnerIcon class="spin" />
              submitting...
            </span>
            <span v-if="formState === 'loading'">
              <HourGlassIcon class="tumble" />
              Loading...
            </span>
            <span v-if="formState === 'success'">
              <CircleCheckIcon />
              Event Proposed!
            </span>
            <span v-if="formState === 'error'">
              <CircleCheckIcon />
              An error occurred.
            </span>
          </button>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="successes">
    <div v-for="s in successes" :key="s">{{ s }}</div>
  </div>
  <div class="errors">
    <div v-for="e in errors" :key="e">{{ s }}</div>
  </div>
</template>
<script lang="ts" src="./ProposeEvent.ts"></script>
<style scoped lang="scss" src="./ProposeEvent.scss"></style>
