<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  isMobile: Boolean,
  isTablet: Boolean,
  quickFilter: String
})

const emit = defineEmits(['update:quick-filter', 'export-csv', 'export-excel', 'export-pdf'])

const updateQuickFilter = value => {
  emit('update:quick-filter', value)
}

const handleExportCsv = () => emit('export-csv')
const handleExportExcel = () => emit('export-excel')
const handleExportPdf = () => emit('export-pdf')
</script>

<template>
  <v-card-title
    class="d-flex align-center py-4 px-4"
    :class="{ 
      'flex-column ga-4': isMobile, 
      'flex-row': !isMobile 
    }"
  >
    <div class="d-flex align-center">
      <span class="text-h6 font-weight-medium">Data Table</span>
    </div>

    <v-spacer v-if="!isMobile" />

    <div 
      class="d-flex align-center"
      :class="{ 
        'flex-column ga-3 w-100': isMobile,
        'ga-3': !isMobile 
      }"
    >
      <v-text-field
        :model-value="quickFilter"
        @update:model-value="updateQuickFilter"
        append-inner-icon="tabler-search"
        label="Search..."
        single-line
        hide-details
        density="compact"
        :style="getSearchFieldWidth"
        variant="outlined"
        clearable
        placeholder="Search in all columns..."
      />

      <div 
        class="d-flex ga-2"
        :class="{ 'w-100': isMobile }"
      >
        <v-btn
          color="success"
          variant="outlined"
          size="small"
          @click="handleExportCsv"
          :class="{ 'flex-1-1-0': isMobile }"
        >
          <VIcon icon="tabler-file-text" size="18" />
          <span v-if="!isMobile" class="ms-2">Export CSV</span>
          <span v-else-if="isTablet" class="ms-1">CSV</span>
          <span v-else class="ms-1 text-caption">CSV</span>
        </v-btn>

        <v-btn
          color="primary"
          variant="outlined"
          size="small"
          @click="handleExportExcel"
          :class="{ 'flex-1-1-0': isMobile }"
        >
          <VIcon icon="tabler-file-spreadsheet" size="18" />
          <span v-if="!isMobile" class="ms-2">Export Excel</span>
          <span v-else-if="isTablet" class="ms-1">Excel</span>
          <span v-else class="ms-1 text-caption">Excel</span>
        </v-btn>

        <v-btn
          color="error"
          variant="outlined"
          size="small"
          @click="handleExportPdf"
          :class="{ 'flex-1-1-0': isMobile }"
        >
          <VIcon icon="tabler-file-filled" size="18" />
          <span v-if="!isMobile" class="ms-2">Export PDF</span>
          <span v-else-if="isTablet" class="ms-1">PDF</span>
          <span v-else class="ms-1 text-caption">PDF</span>
        </v-btn>
      </div>
    </div>
  </v-card-title>
</template>

<script>
export default {
  computed: {
    getSearchFieldWidth() {
      if (this.isMobile) return 'width: 100%'
      if (this.isTablet) return 'width: 400px'
      return 'width: 500px'
    }
  }
}
</script>