<script setup>
  const route = useRoute()
  const router = useRouter()
  const supabase = useSupabaseClient()


  const currentSubmission = (await supabase.from("formSubmits").select().eq('id',route.params.id)).data[0]
  const form = (await supabase.from("forms").select().eq('id',currentSubmission.formType)).data[0]

  const formData = ref({})
  const submitted = ref(currentSubmission.submitted)

  const submitForm = async () => {

    submitted.value = true

    console.log(formData.value)
    const {data,error} = await supabase
        .from("formSubmits")
        .update({values: formData.value, submitted: true})
        .eq('id',currentSubmission.id)
        .select()

    if(error) {
      console.log(error)
    } else if( data) {
      formData.value = {}
    }




  }

</script>

<template>
  <div>
    <UForm
        v-if="!submitted"
      @submit="submitForm"
      @reset="formData = {}"
    >
      <div
        v-for="item in form.fields"
      >
        <p v-if="item.type === 'header'">{{item.label}}</p>
        <UFormGroup
          v-else-if="item.type.includes('Input')"
          :label="item.required ? item.label + '*' : item.label"
        >
            <UInput
              v-if="item.type === 'textInput'"
              v-model="formData[item.key]"
              :required="item.required"
            />
            <UInput
              v-else-if="item.type === 'numberInput'"
              v-model="formData[item.key]"
              :required="item.required"
              type="number"
              inputmode="numeric"
            />
        </UFormGroup>
      </div>

      <UButton type="submit">
        Abschicken
      </UButton>
      <UButton
          type="reset"
          color="rose"
          class="m-2"
      >
        Zurücksetzen
      </UButton>


    </UForm>
    <div v-else>
      Dieses Formular wurde bereits abgeschickt. Möchten Sie erneut Daten abschicken, sprechen Sie bitte Ihren Ansprechpartner an, um das Formular freizuschalten.
    </div>
  </div>
</template>

<style scoped>

</style>