<template>
  <section class="content-grid">
    <v-card class="span-12 panel-pad">
      <div class="toolbar-row mb-4">
        <v-text-field v-model="localFilters.search" label="Search" hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px" @update:model-value="emitFilters" />
        <v-select v-model="localFilters.status" :items="statusItems" clearable label="Status" hide-details style="max-width: 180px" @update:model-value="emitFilters" />
        <v-spacer />
        <v-btn variant="tonal" prepend-icon="mdi-pencil-multiple" :disabled="!selectedAssetIds.length" @click="$emit('open-mass-edit')">Mass edit</v-btn>
        <v-btn variant="tonal" prepend-icon="mdi-barcode" @click="$emit('print-labels')">
          {{ selectedAssetIds.length ? `Labels (${selectedAssetIds.length})` : 'Labels' }}
        </v-btn>
        <v-btn variant="tonal" prepend-icon="mdi-upload" @click="$refs.importFile.click()">Import</v-btn>
        <input ref="importFile" hidden type="file" accept=".csv,.json,.xlsx,.xls,.xml" @change="$emit('import-assets', $event)" />
        <v-menu>
          <template #activator="{ props }">
            <v-btn v-bind="props" variant="tonal" prepend-icon="mdi-download">Export</v-btn>
          </template>
          <v-list density="compact">
            <v-list-item v-for="format in ['json', 'csv', 'xlsx', 'xml']" :key="format" :title="format.toUpperCase()" @click="$emit('export-assets', format)" />
          </v-list>
        </v-menu>
      </div>
      <DataTable
        :columns="columns"
        :rows="assets"
        row-key="id"
        has-lead
        has-actions
        empty-text="No assets match the current filters."
      >
        <template #lead-header>
          <v-checkbox-btn :model-value="allSelected" @update:model-value="$emit('toggle-all', $event)" />
        </template>
        <template #lead="{ row }">
          <v-checkbox-btn :model-value="selectedAssetIds.includes(row.id)" @update:model-value="$emit('toggle-asset', row.id)" />
        </template>
        <template #cell-asset_id="{ row }">
          <span class="font-weight-bold">{{ row.asset_id }}</span>
        </template>
        <template #cell-status="{ row }">
          <span :class="['status-chip', `status-${row.status}`]">{{ row.status }}</span>
        </template>
        <template #actions="{ row }">
          <v-btn icon="mdi-pencil" size="small" variant="text" @click="$emit('edit-asset', row)" />
        </template>
      </DataTable>
    </v-card>
  </section>
</template>

<script>
import DataTable from '../components/DataTable.vue';

export default {
  components: { DataTable },
  props: {
    allSelected: { type: Boolean, default: false },
    assets: { type: Array, required: true },
    assetFilters: { type: Object, required: true },
    currency: { type: Function, required: true },
    selectedAssetIds: { type: Array, required: true },
    statusItems: { type: Array, required: true }
  },
  emits: ['edit-asset', 'export-assets', 'filter-assets', 'import-assets', 'open-mass-edit', 'print-labels', 'toggle-all', 'toggle-asset'],
  data() {
    return {
      localFilters: { ...this.assetFilters },
      columns: [
        { key: 'asset_id', label: 'Asset ID' },
        { key: 'description', label: 'Description' },
        { key: 'entity_name', label: 'Entity' },
        { key: 'category', label: 'Category' },
        { key: 'status', label: 'Status' },
        { key: 'acquisition_cost', label: 'Cost', format: 'currency' },
        { key: 'in_service_date', label: 'Service date', format: 'date' }
      ]
    };
  },
  watch: {
    assetFilters: {
      handler(value) {
        this.localFilters = { ...value };
      },
      deep: true
    }
  },
  methods: {
    emitFilters() {
      this.$emit('filter-assets', { ...this.localFilters });
    }
  }
};
</script>
