<template>
  <div class="branch-selection">
    <h3>{{ $t('falukant.branch.selection.title') }}</h3>
    <div class="selection-row">
      <div class="dropdown-wrapper">
        <FormattedDropdown
          :key="branchesKey"
          :options="branches"
          :columns="branchColumns"
          v-model="localSelectedBranch"
          :placeholder="$t('falukant.branch.selection.placeholder')"
          @update:modelValue="updateSelectedBranch"
        />
      </div>
      <div v-if="selectedBranchWeather" class="weather-info">
        <span class="weather-label">{{ $t('falukant.branch.selection.weather') }}:</span>
        <span class="weather-value">{{ $t(`falukant.weather.${selectedBranchWeather}`) }}</span>
      </div>
    </div>
    <div>
      <button @click="openCreateBranchDialog">
        {{ $t('falukant.branch.actions.create') }}
      </button>
      <button
        @click="$emit('upgradeBranch')"
        :disabled="!localSelectedBranch"
      >
        {{ $t('falukant.branch.actions.upgrade') }}
      </button>
    </div>
  </div>

  <!-- Dialog-Komponente -->
  <CreateBranchDialog
    ref="createBranchDialog"
    :regions="availableRegions"
    @create-branch="handleCreateBranch"
  />
</template>

<script>
import FormattedDropdown from '@/components/form/FormattedDropdown.vue';
import CreateBranchDialog from '@/dialogues/falukant/CreateBranchDialog.vue';

export default {
  name: "BranchSelection",
  components: {
    FormattedDropdown,
    CreateBranchDialog,
  },
  props: {
    branches: { type: Array, required: true },
    selectedBranch: { type: Object, default: null },
  },
  data() {
    return {
      localSelectedBranch: this.selectedBranch,
      branchColumns: [
        { field: "cityName", label: this.$t('falukant.branch.columns.city') },
        { field: "type",     label: this.$t('falukant.branch.columns.type')  },
      ],
    };
  },
  computed: {
    // Erzwingt ein Neu-Rendern des Dropdowns, wenn sich die Branch-Liste ändert
    branchesKey() {
      return this.branches.map(b => b.id).join('-');
    },
    selectedBranchWeather() {
      return this.localSelectedBranch?.weather || null;
    },
  },
  watch: {
    selectedBranch(newVal) {
      this.localSelectedBranch = newVal;
    },
  },

  methods: {
    updateSelectedBranch(value) {
      this.$emit('branchSelected', value);
    },

    openCreateBranchDialog() {
      this.$refs.createBranchDialog.open();
    },

    handleCreateBranch() {
      this.$emit('createBranch');
    },
  },
};
</script>

<style scoped>
.branch-selection {
  border: 1px solid #ccc;
  margin: 10px 0;
  border-radius: 4px;
  padding: 10px;
}

.selection-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dropdown-wrapper {
  min-width: 200px;
}

button {
  margin: 5px;
}

.weather-info {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 0.9em;
  white-space: nowrap;
}

.weather-label {
  font-weight: bold;
  margin-right: 5px;
}

.weather-value {
  text-transform: capitalize;
}
</style>
