<script setup lang="ts">
import {ref, onMounted, type PropType, reactive} from "vue";
import {baseWebstream, createWebstream, getWebstream, updateWebstream, type Webstream} from "@models/webstream.ts";

// Props and emits
const props = defineProps({
  webstreamId: {
    type: Number as PropType<number | null>,
    required: true,
  },
});
const emits = defineEmits(['go-back']);

// Data
const loading = ref(false);
const isFormValid = ref(false);
const currentWebstream = ref<Webstream>(baseWebstream());

// Funcs
onMounted(async () => {
  loading.value = true;
  if (props.webstreamId === null) {
    currentWebstream.value = baseWebstream();
  } else {
    currentWebstream.value = await getWebstream(props.webstreamId);
  }
  loading.value = false;
});

const goBack = () => {
  emits('go-back');
};

const saveWebstream = async () => {
  loading.value = true;
  try {
    if (currentWebstream.value.id) {
      await updateWebstream(currentWebstream.value);
      goBack();
      return
    }

    await createWebstream(currentWebstream.value);
    goBack()
    return

  } catch (error) {
    console.error("Error saving webstream:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <v-card
      :disabled="loading"
      :loading="loading"
  >
    <template v-slot:loader="{ isActive }">
      <v-progress-linear
          :active="isActive"
          color="deep-purple"
          height="4"
          indeterminate
      ></v-progress-linear>
    </template>

    <v-card-title>
      <h3>Webstream</h3>
    </v-card-title>
    <v-form ref="form" v-model="isFormValid">
      <v-card-text>
        <v-row no-gutters>
          <!-- Name Field -->
          <v-col cols="12" md="6">
            <v-card>
              <v-text-field
                  v-model="currentWebstream.name"
                  label="Nome"
                  density="compact"
                  :rules="[v => !!v || 'Nome è obbligatorio']"
                  required="true"
              />
            </v-card>
          </v-col>

          <!-- URL Field -->
          <v-col cols="12" md="6">7
            <v-card>
              <v-text-field
                  v-model="currentWebstream.url"
                  label="URL"
                  density="compact"
                  :rules="[v => !!v || 'URL è obbligatorio', v => /^http?:\/\//.test(v) || 'URL deve iniziare con http://']"
                  required="true"
              />
            </v-card>
          </v-col>

          <!-- Description Field -->
          <v-col cols="12">
            <v-card>
              <v-textarea
                  v-model="currentWebstream.description"
                  label="Descrizione"
                  density="compact"
                  rows="2"
                  :rules="[v => !!v || 'Descrizione è obbligatoria']"
                  required="true"
              />
            </v-card>
          </v-col>

          <!-- Length Field -->
          <v-col cols="12">
            <v-card>
              <v-textarea
                  v-model="currentWebstream.length"
                  label="Durata"
                  density="compact"
                  rows="2"
                  :rules="[v => !!v || 'Durata è obbligatoria']"
                  required="true"
              />
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>

      <v-card-actions>
        <v-btn color="accent" @click="goBack">Torna indietro</v-btn>
        <v-btn color="primary" @click="saveWebstream" :disabled="!isFormValid">
          {{ currentWebstream.id ? 'Aggiorna' : 'Crea' }}
        </v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>

<style scoped></style>
