<script setup lang="ts">
import {ref, type PropType, onMounted} from "vue";
import {baseShowDays, type ShowDays} from "@models/show/showDays.ts";
import {showDaysForm} from "@/composables/content/show/show_schedule_page.ts";

const emits = defineEmits([
  'toggleShowScheduleForm',
  'saveShowSchedule'
])

// Data
const showDays = defineModel<ShowDays>();
const showDaysFields = ref({});

// funcs
onMounted(() => {
      showDaysFields.value = showDaysForm(showDays);
    }
)

const goBack = () => {
  showDays = baseShowDays();
  emits('toggleShowScheduleForm');
}
const saveShowSchedule = () => {
  emits('saveShowSchedule');
}
</script>

<template>
  <v-card>
    <v-card-title>
      <h3>Regole di programmazione</h3>
    </v-card-title>
    <v-form>
      <v-card-text>
        <v-row no-gutters>
            <v-col v-for="(field, key) in showDaysFields" :key="key" cols="5" md="6" lg="4">
              <v-card>
              <Component
                  :is="field.component"
                  v-model="showDays[key]"
                  :label="field.label"
                  :title="field.title || ''"
                  :disabled="field.disabled || false"
                  :density="'compact'"
                  :min="field.min"
                  rows="2"
                  item-title="type_name"
                  hide-details="auto"
                  class="mb-2"
                  clearable
                  :active="true"
                  v-bind="field.props || {}"
              />
              </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="accent" @click="saveShowSchedule">Salva</v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>

<style scoped>

</style>