<template>
  <div class="dashboard-header">
    <div class="dashboard-title">Dashboard</div>

    <div class="dashboard-filters">
      <q-select
        :model-value="selectedPropertyOption"
        :options="propertyOptions"
        class="dashboard-filter dashboard-filter--property"
        dense
        label="Imóveis"
        option-label="label"
        outlined
        @update:model-value="$emit('update:property', $event)"
      />

      <q-select
        :model-value="selectedMonth"
        :options="monthOptions"
        class="dashboard-filter dashboard-filter--month"
        dense
        emit-value
        label="Mês"
        map-options
        option-label="label"
        option-value="value"
        outlined
        @update:model-value="$emit('update:month', $event)"
      >
        <template #append>
          <q-icon name="mdi-calendar-blank" />
        </template>
      </q-select>

      <q-select
        :model-value="selectedYear"
        :options="yearOptions"
        class="dashboard-filter dashboard-filter--year"
        dense
        emit-value
        label="Ano"
        map-options
        option-label="label"
        option-value="value"
        outlined
        @update:model-value="$emit('update:year', $event)"
      />

      <q-btn-dropdown
        class="dashboard-export-btn"
        color="primary"
        label="Exportar"
        no-caps
        unelevated
        :disable="loading || exporting || !canExportReport"
        :loading="exporting"
      >
        <q-list dense>
          <q-item v-close-popup clickable @click="$emit('export', 'xlsx')">
            <q-item-section>XLSX</q-item-section>
          </q-item>

          <q-item v-close-popup clickable @click="$emit('export', 'pdf')">
            <q-item-section>PDF</q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </div>
  </div>
</template>

<script setup>
defineProps({
  canExportReport: {
    type: Boolean,
    default: false,
  },
  exporting: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  monthOptions: {
    type: Array,
    default: () => [],
  },
  propertyOptions: {
    type: Array,
    default: () => [],
  },
  selectedMonth: {
    type: Number,
    default: null,
  },
  selectedPropertyOption: {
    type: Object,
    default: null,
  },
  selectedYear: {
    type: Number,
    default: null,
  },
  yearOptions: {
    type: Array,
    default: () => [],
  },
});

defineEmits(["export", "update:month", "update:property", "update:year"]);
</script>

<style scoped lang="scss">
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
  vertical-align: middle;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  color: #202427;
  line-height: 1.1;
}

.dashboard-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
  min-width: 0;
  vertical-align: middle;
}

.dashboard-filter {
  min-width: 120px;
  max-width: 100%;
}

.dashboard-filter--property {
  min-width: 220px;
}

.dashboard-filter--month,
.dashboard-filter--year {
  min-width: 110px;
}

.dashboard-export-btn {
  height: 40px;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .dashboard-header {
    gap: 12px;
  }

  .dashboard-title {
    font-size: 24px;
  }

  .dashboard-filters {
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
  }

  .dashboard-filter,
  .dashboard-filter--property,
  .dashboard-filter--month,
  .dashboard-filter--year {
    width: 100%;
    min-width: 100%;
  }

  .dashboard-export-btn {
    width: 100%;
    max-width: 100%;
  }
}
</style>
