<template>
  <div>
    <div class="mb-5">
      <label 
        v-for="item in filteredPhases" 
        :key="item.id"
        class="py-3 is-clickable is-block"
        :class="{ 'has-background-success-light': selectedPhaseId === item.id }"
        style="border-bottom: 1px solid #dbdbdb;"
      >
        <div class="columns px-3 is-mobile is-vcentered is-gapless mb-0">
          <div class="column">
            <span class="is-size-6">{{ item.name }}</span>
          </div>
          <div class="column is-narrow">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="10" :stroke="selectedPhaseId === item.id ? '#48c78e' : '#dbdbdb'" stroke-width="2"/>
              <circle v-if="selectedPhaseId === item.id" cx="12" cy="12" r="6" fill="#48c78e"/>
            </svg>
            <input 
              type="radio" 
              :value="item.id" 
              v-model="selectedPhaseId"
              style="display: none;"
            />
          </div>
        </div>
      </label>
    </div>
    
    <div class="field">
      <div class="control">
        <button 
          class="button is-success has-text-white is-fullwidth" 
          @click="submit" 
          :disabled="!selectedPhaseId"
        >
          {{ isVietnamese ? 'Xác nhận' : 'Confirm' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "@/stores/index";
export default {
  setup() {
    const store = useStore();
    return { store };
  },
  emits: ['modalevent', 'close'],
  props: {
    filterPhases: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedPhaseId: null,
      phases: [
        { id: 'p1', name: 'Giữ chỗ', code: 'reserved', phase: 1, status: 3,transstatus :1 },
        { id: 'p2a', name: 'Thỏa thuận thực hiện nguyện vọng', code: 'fulfillwish', phase: 4, status: 5,transstatus :1 },
        { id: 'p2b', name: 'Đặt cọc', code: 'deposit', phase: 2, status: 4,transstatus :1 },
        { id: 'p3', name: 'Mua bán', code: 'pertrade', phase: 3, status: 6,transstatus :1 }
      ]
    };
  },
  computed: {
    isVietnamese() {
      return this.store.lang === 'vi';
    },
    filteredPhases() {
      if (this.filterPhases.length === 0) {
        return this.phases; // If no filter is provided, show all phases
      }
      return this.phases.filter(phase => this.filterPhases.includes(phase.code));
    }
  },
  methods: {
    submit() {
      if (this.selectedPhaseId) {
        const selected = this.phases.find(p => p.id === this.selectedPhaseId);
        this.$emit('modalevent', { name: 'phaseSelected', data: selected });
        this.$emit('close');
      }
    }
  }
};
</script>