<template>
  <form @submit.prevent="onSubmit" class="mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Enter text:</label>
    <input type="text" class="form-control" v-model="title" />
    <fieldset class="row mb-3">
      <legend class="col-form-label col-sm-2 pt-0">Important?</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            checked
            v-model="picked"
            value="y"
          />
          <label class="form-check-label"> Yes </label>
        </div>
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            name="gridRadios"
            id="gridRadios2"
            v-model="picked"
            value="n"
          />
          <label class="form-check-label"> No </label>
        </div>
      </div>
    </fieldset>
    <button type="submit" class="btn btn-primary">Create</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      picked: "",
      newTask: {
        id: "",
        title: "",
        completed: false,
        important: false,
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.title.trim()) {
        this.newTask = {
          id: Date.now(),
          title: this.title,
          completed: false,
        };
        if (this.picked == "y") {
          this.newTask.important = true;
        } else {
          this.newTask.important = false;
        }
      }

      this.$emit("add-task", this.newTask);
      this.title = "";
    },
  },
};
</script>
