<template>
  <q-page class="row q-pa-md q-gutter-md column">
    <q-card v-for="(form, index) in forms" :key="index">
      <q-card-section>
        <div>
          {{ form.prompt }}
        </div>
        <div>
          {{ form.type }}
        </div>
        <div v-if="form.type == 'multiple_select'">
          <ul>
            <li v-for="item in form.extra" :key="item.id">
              {{ item.id }}
            </li>
            <li>
              <q-form @submit.prevent="form.new_choice" class="row">
                <q-input
                  label="New choice" type="text"
                  class="col-10"
                  v-model="form.new_choice_value"
                ></q-input>
                <q-btn label="Submit" type="submit" color="primary"/>
              </q-form>
            </li>
          </ul>
        </div>
        <div v-if="form.type == 'range'">
          <div>min: {{ form.extra.min }}</div>
          <div>max: {{ form.extra.max }}</div>
        </div>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <p>New form</p>
        <q-form class="row" @submit.prevent="submit_new_form">
          <q-select
            label="Type"
            class="col-12"
            :options="options"
            v-model="new_form_data.type"
          ></q-select>
          <q-input
            label="Prompt" type="text"
            class="col-12"
            v-model="new_form_data.prompt"
          ></q-input>
          <q-input
            label="Prompt Id" type="text"
            class="col-12"
            v-model="new_form_data.prompt_id"
          ></q-input>
          <q-input v-if="new_form_data.type == 'range'"
            label="Min" type="number" class="col-12"
            v-model="new_form_data.extra.min"
          ></q-input>
          <q-input v-if="new_form_data.type == 'range'"
            label="Max" type="number" class="col-12"
            v-model="new_form_data.extra.max"
          ></q-input>
          <q-btn label="Submit" type="submit" color="primary"/>
        </q-form>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script>
import { defineComponent, ref } from 'vue'
import {
  get_forms,
  create_option,
  create_form,
} from '../api.js'

export default defineComponent({
  name: 'FormPage',
  setup(){
    let forms = ref([])
    get_forms().then(json => {
      forms.value = json
      forms.value.forEach(form => {
        form.new_choice_value = ""
        form.new_choice = function(){
          create_option(form, form.new_choice_value)
        }
      })
    })
    let new_form_data = ref({
      "extra": {},
    })
    return {
      forms,
      options: [
        "multiple_select",
        "number",
        "range",
        "text",
      ],
      new_form_data,
      submit_new_form(){
        if(new_form_data.value.type && new_form_data.value.prompt && new_form_data.value.prompt_id){
          if(new_form_data.value.type == 'range' && new_form_data.value.extra.min && new_form_data.value.extra.max) {
            console.log(new_form_data.value)
            create_form(new_form_data.value)
          } else if (new_form_data.value.type != 'range'){
            new_form_data.value.extra = []
            create_form(new_form_data.value)
          }
        }
      },
    }
  }
})
</script>
