<template>
  <Authenticated>
    <form v-on:submit.prevent="createGroup" id="id-form-column">

      <label for="name">Group name</label>
      <input type="text" id="name" v-model="formInput.groupName" required/>

      <label for="description">Description</label>
      <input type="text" id="description" v-model="formInput.description"/>

      <label for="currency">Currency</label>
      <select id="currency" name="cars" v-model="formInput.currency" required>
        <option value="CHF">Schweizer Franken</option>
        <option value="EUR">Euro</option>
        <option value="USD">US-Dollar</option>
        <option value="GBP">British Pound Sterling</option>
      </select>

      <Button type="submit">Create Group</Button>
      <div>{{ errorMessage }}</div>
    </form>
  </Authenticated>
</template>

<script>
import Authenticated from "@/components/Authenticated";
import { postJson } from "@/util/fetch";
import Button from "@/components/Button";

export default {
  components: {
    Button,
    Authenticated,
  },
  data() {
    return {
      groups: undefined,
      formInput: {
        groupName: undefined,
        description: undefined,
        currency: undefined,
      },
      errorMessage: undefined,
    };
  },
  methods: {
    createGroup() {
      postJson("/group", {
        name: this.formInput.groupName,
        description: this.formInput.description,
        currency: this.formInput.currency,
      }).then(response => {
        if (!response.ok) {
          response.json().then(json => this.errorMessage = json.message);
        } else {
          this.$router.push(`/group/${this.formInput.groupName}`)
        }
      });
    },
  }
};
</script>
<style scoped>
#id-form-column {
  display: flex;
  flex-direction: column
}

select {
  display: flex;
  height: 3rem;
  margin-top: 10px;
  width: 200px;
  border-radius: 10px;
}

select:focus {
  border-color: #d72765;
}

button {
  margin-top: 2em;
}
</style>