<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>
