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