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

const auth = useAuthStore();

const { getTracklist } = blocks_page()

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
  },
  repeat_tracks: false,
  overflow_tracks: false,
  sort: null
})

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)
}

const showPreview = async () => {
  const files = await getTracklist(item)
  item.tracks = []
  files.forEach(file => {
    item.tracks.push({file: file})
  })
}

onBeforeMount(() => {
  if (item.id > 0) {
    const limit = item.criteria.find(el => el.criteria === 'limit')
    const repeat_tracks = item.criteria.find(el => el.criteria === 'repeat_tracks')
    const overflow_tracks = item.criteria.find(el => el.criteria === 'overflow_tracks')
    const sort = item.criteria.find(el => el.criteria === 'sort')
    item.limit = {
      type: limit.modifier,
      quantity: limit.value
    }
    item.repeat_tracks = !!repeat_tracks.value
    item.overflow_tracks = !!overflow_tracks.value
    item.sort = sort.value
    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 ? field.value : null"
            :disabled="field.disabled"
            @update:modelValue="checkError(field, item[key])"
            @update-property="updateProperty"
            :error="checkError(field, item[key])"
            :limit="item.limit"
            rows="2"
            :items="field.items"
            :criteria="item.criteria"
            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="primary"
          @click="save"
          :disabled="disabledSaveButton"
      >Salva</v-btn>
    </v-col>
    <v-col>
      <v-btn
        color="primary"
        :disabled="disabledSaveButton"
        @click="showPreview"
        >Anteprima</v-btn>
      <TrackList
          :tracks="item.tracks"
          @update-tracks="update"
      />
    </v-col>
  </v-row>
  {{item}}
</template>

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