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

const auth = useAuthStore();

const { loading, getTracklist } = blocks_page()

const emit = defineEmits([
  'saveItem'
])

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

const smartBlockStore = useSmartBlockStore();
const item = smartBlockStore.currentSmartBlock;
console.log(smartBlockStore.currentSmartBlock)

const length = ref([]);

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, length } = await getTracklist(item);
  item.length = length;
  smartBlockStore.updateField({key: 'length', value: length});
  console.log(files, formatFromSeconds(length))
  item.tracks = [];
  files.forEach(file => {
    item.tracks.push({file: file});
  })
}

onMounted(() => {
  smartBlockStore.updateField({key: 'creator_id', value: auth.userData.user.id})
})

watch(loading.value, (newVal, oldVal) => {
  disabledSaveButton.value = newVal;
})
</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 : field.type == 'checkbox' ? true : null"
            :disabled="field.disabled"
            @update:modelValue="checkError(field, item[key])"
            @update-property="updateProperty"
            :error="checkError(field, item[key])"
            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-row
          class="d-flex justify-between"
          no-gutters>
        <v-btn
            color="primary"
            :disabled="disabledSaveButton"
            @click="showPreview"
        >Anteprima</v-btn>
        <span>
          Durata: {{ item.length === 'N/A' ? 'N/A' : formatFromSeconds(item.length) }}
        </span>
      </v-row>
      <TrackList
          :tracks="item.tracks"
          @update-tracks="update"
      />
    </v-col>
  </v-row>
</template>

<style scoped>
  .tables > .v-col {
    width: 50%;
    overflow: hidden;
  }
  .v-list {
    max-height: 77vh;
    margin: 4px 0 0 4px;
    border-radius: 4px;
  }
</style>