<template>
  <div class="branch-selection">
    <h3>{{ $t('falukant.branch.selection.title') }}</h3>
    <div>
      <FormattedDropdown
        :options="branches"
        :columns="branchColumns"
        v-model="localSelectedBranch"
        :placeholder="$t('falukant.branch.selection.placeholder')"
        @update:modelValue="updateSelectedBranch"
      />
    </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')  },
      ],
    };
  },
  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;
}

button {
  margin: 5px;
}
</style>
