<template>
  <div class="modal-card">
    <header
      class="modal-card-head"
      :class="headerClass"
    >
      <p class="modal-card-title has-text-white">
        <span class="icon-text">
          <span class="icon">
            <SvgIcon
              :name="iconName"
              type="white"
              :size="24"
            />
          </span>
          <span>{{ title }}</span>
        </span>
      </p>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">{{ label }}</label>
        <div class="control">
          <textarea
            class="textarea"
            v-model="note"
            :placeholder="placeholder"
          ></textarea>
        </div>
        <p
          v-if="error"
          class="help is-danger"
        >
          {{ error }}
        </p>
      </div>
    </section>
    <footer class="modal-card-foot is-justify-content-flex-end">
      <button
        class="button"
        @click="$emit('close')"
      >
        {{ cancelText }}
      </button>
      <button
        class="button"
        :class="buttonClass"
        @click="confirm"
      >
        {{ confirmText }}
      </button>
    </footer>
  </div>
</template>

<script>
import { useStore } from "@/stores/index";

export default {
  props: {
    title: {
      type: String,
      default: "Nhập nội dung",
    },
    label: {
      type: String,
      default: "Ghi chú",
    },
    placeholder: {
      type: String,
      default: "Nhập nội dung...",
    },
    type: {
      type: String,
      default: "primary", // primary, warning, danger
    },
    confirmText: {
      type: String,
      default: "Xác nhận",
    },
    cancelText: {
      type: String,
      default: "Hủy",
    },
  },
  emits: ["close", "modalevent"],
  setup() {
    const store = useStore();
    return { store };
  },
  data() {
    return {
      note: "",
      error: "",
    };
  },
  computed: {
    isVietnamese() {
      return this.store.lang === "vi";
    },
    headerClass() {
      const colorMap = {
        primary: "has-background-primary",
        warning: "has-background-warning",
        danger: "has-background-danger",
      };
      return colorMap[this.type] || "has-background-primary";
    },
    buttonClass() {
      const colorMap = {
        primary: "is-primary",
        warning: "is-warning",
        danger: "is-danger",
      };
      return colorMap[this.type] || "is-primary";
    },
    iconName() {
      const iconMap = {
        primary: "edit.svg",
        warning: "warning.svg",
        danger: "alert.svg",
      };
      return iconMap[this.type] || "edit.svg";
    },
  },
  methods: {
    confirm() {
      if (!this.note.trim()) {
        this.error = this.isVietnamese ? "Nội dung không được để trống." : "Content cannot be empty.";
        return;
      }
      this.$emit("modalevent", {
        name: "noteConfirm",
        data: { note: this.note },
      });
      this.$emit("close");
    },
  },
};
</script>
