<script setup>
import { ref } from 'vue'
import ModalDialog from './ModalDialog.vue'

const emit = defineEmits(['close', 'export'])

const filters = ref({
  exercises: true,
  combos: true,
  sessions: true,
  collections: true,
  executionLogs: false,
  settings: false,
})

function onExport() {
  emit('export', { ...filters.value })
}
</script>

<template>
  <ModalDialog :title="$t('export.filterTitle')" @close="$emit('close')">
    <p class="text-muted">{{ $t('export.filterDescription') }}</p>

    <div class="filter-list">
      <label class="filter-item" data-testid="export-filter-exercises">
        <input v-model="filters.exercises" type="checkbox" />
        <span>{{ $t('nav.exercises') }}</span>
      </label>
      <label class="filter-item" data-testid="export-filter-combos">
        <input v-model="filters.combos" type="checkbox" />
        <span>{{ $t('nav.combos') }}</span>
      </label>
      <label class="filter-item" data-testid="export-filter-sessions">
        <input v-model="filters.sessions" type="checkbox" />
        <span>{{ $t('nav.sessions') }}</span>
      </label>
      <label class="filter-item" data-testid="export-filter-collections">
        <input v-model="filters.collections" type="checkbox" />
        <span>{{ $t('nav.collections') }}</span>
      </label>
      <label class="filter-item" data-testid="export-filter-execution-logs">
        <input v-model="filters.executionLogs" type="checkbox" />
        <span>{{ $t('export.executionLogs') }}</span>
      </label>
      <label class="filter-item" data-testid="export-filter-settings">
        <input v-model="filters.settings" type="checkbox" />
        <span>{{ $t('export.settings') }}</span>
      </label>
    </div>

    <div class="export-actions">
      <button class="btn" data-testid="export-filter-cancel" @click="$emit('close')">
        {{ $t('import.cancel') }}
      </button>
      <button
        class="btn btn-primary"
        data-testid="export-filter-confirm"
        :disabled="
          !filters.exercises &&
          !filters.combos &&
          !filters.sessions &&
          !filters.collections &&
          !filters.executionLogs &&
          !filters.settings
        "
        @click="onExport"
      >
        <i class="bi bi-download"></i>
        {{ $t('settings.exportData') }}
      </button>
    </div>
  </ModalDialog>
</template>

<style scoped>
.filter-list {
  margin: 16px 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 15px;
}

.filter-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
</style>
