<script setup lang="ts">
import Sources from "@/components/content/partials/Sources.vue";
import TrackList from "@/components/content/partials/TrackList.vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import {reactive, ref} from "vue";
import {smartblock} from "@models/smartblock/smartblock.ts";

const auth = useAuthStore();

const emit = defineEmits([
  'saveItem'
])

const props = defineProps({
  item: Object,
})

const item = props.item.id > 0 ? props.item : reactive({
  id: 0,
  name: '',
  creator_id: auth.userData.user.id,
  description: '',
  tracks: [],
  criteria: [],
  limit: {
    type: null,
    quantity: null
  },
  repeated_tracks: false,
  overflow_tracks: false
})

const smartblockFields = smartblock(item)

//Is true if there is a required field empty or while saving
const disabledSaveButton = ref(true)


const update = (list) => {
  item.tracks = list
}

const save = () => {
  // const errors
  emit('saveItem', item)
}

const checkError = (field, model) => {
  if (field.required) {
    const error = field.required && (model === '' || model === null)
    disabledSaveButton.value = error
    return error
  }
  return false
}

const updateProperty = (criteria, prop) => {
  console.log(criteria, prop)
  item[prop] = criteria
  console.log(item)
}
</script>

<template>
  <v-row no-gutters>
    <v-col>
        <Component
            v-for="(field, key) in smartblockFields()"
            :is="field.component"
            :label="field.label"
            :radioButtons="field.radioButtons"
            :value="field.value"
            :disabled="field.disabled"
            :density="'compact'"
            @update:modelValue="checkError(field, item[key])"
            @update-property="updateProperty"
            :error="checkError(field, item[key])"
            :limit="item.limit"
            rows="2"
            :items="field.items"
            v-model="item[key]"
            item-title="title"
            item-value="value"
            density="compact"
            hide-details="auto"
            class="mb-2"
            clearable
            :active="true"
        />
      <v-btn
          color="accent"
          @click="$emit('goBack')"
      >Torna indietro</v-btn>
      <v-btn
          color="secondary"
          @click="preview"
      >Anteprima</v-btn>
      <v-btn
          color="primary"
          @click="save"
          :disabled="disabledSaveButton"
      >Salva</v-btn>
    </v-col>
    <v-col>
      <TrackList
          :tracks="item.tracks"
          @update-tracks="update"
      />
    </v-col>
  </v-row>
  {{item}}
<!--  <v-row class="tables" no-gutters>-->
<!--    <v-col>-->
<!--      <TrackList-->
<!--          :tracks="item.tracks"-->
<!--          @update-tracks="update"-->
<!--      />-->
<!--    </v-col>-->
<!--    <v-col>-->
<!--      <Sources />-->
<!--    </v-col>-->
<!--  </v-row>-->
<!--  <v-row no-gutters>-->
<!--  </v-row>-->
</template>

<style scoped>
  .tables > .v-col {
    width: 50%;
    overflow: hidden;
  }
</style>