<script setup>
import { ref } from "vue";
import FormPad from "../../components/form/Pad.vue";
import { useAlert } from "../../composables/alert";
import { Mask } from "maska";
const masksInput = new Mask({
  mask: "###-###-N",
  tokens: {
    N: { pattern: /[0-9]/, multiple: true }
  }
});
const alert = useAlert();
const dialog = ref(false);
const phone = ref();
const typePhone = ref([]);
const formPadTemplate = ref();
const phoneNoField = ref(null);
const objAddNew = ref({ phone: "", type: [] });
const listPhonesAll = ref([
  { "phone": "082745855410101", "type": ["default"] },
  { "phone": "0827196038", "type": null },
  { "phone": "0956458547", "type": ["post", "receipt"] }
]);
const listPhonesType = ref([
  { "id": "default", "name": "\u0E04\u0E48\u0E32\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" },
  { "id": "post", "name": "\u0E08\u0E31\u0E14\u0E2A\u0E48\u0E07\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C" },
  { "id": "receipt", "name": "\u0E08\u0E31\u0E14\u0E2A\u0E48\u0E07\u0E43\u0E1A\u0E40\u0E2A\u0E23\u0E47\u0E08 (e-receipt)" }
]);
const property = defineProps({
  modelValue: { type: Number, required: true, default: 0 },
  decimal: { type: Number, required: false, default: 2 },
  currency: { type: String, required: false, default: "" }
});
const focusOnTextField = () => {
  if (phoneNoField.value) {
    phoneNoField.value.focus();
  }
};
const mapTypeName = (id) => {
  const item = listPhonesType.value.find((entry) => entry.id === id);
  return item ? item.name : void 0;
};
const mapPhoneCurrent = (phone2) => {
  const item = listPhonesAll.value.find((entry) => entry.phone === phone2);
  return item ? item.phone : "";
};
const add = () => {
  if (formPadTemplate.value.isValid) {
    objAddNew.value.phone = phone.value.phone;
    objAddNew.value.type = typePhone.value.length === 0 ? ["default"] : typePhone.value;
    if (mapPhoneCurrent(objAddNew.value.phone) != "") {
      focusOnTextField();
      alert?.addAlert({ message: "\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C\u0E0B\u0E49\u0E33 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A", alertType: "error" });
    } else {
      dialog.value = false;
      listPhonesAll.value.push(objAddNew.value);
    }
  }
};
const registerPhone = () => {
  dialog.value = true;
  phone.value = "";
  typePhone.value = [];
};
</script>

<template>
  <v-row class="ma-5">
    <v-col cols="4">
      <div>
        <v-card v-for="item in listPhonesAll" :key="item.phone"
                class="mt-1"
                variant="tonal"
                width="auto"
                :title="masksInput.masked(item.phone)"
        >
          <v-card-text class="pl-10">
            <v-chip color="primary" v-for="itemType in item.type">{{ mapTypeName(itemType) }}</v-chip>
          </v-card-text>
          <template v-slot:prepend>
            <v-icon icon="mdi mdi-phone"></v-icon>
          </template>
          <template v-slot:append>
            <v-icon icon="mdi mdi-pencil"></v-icon>
          </template>
        </v-card>
      </div>
      <div class="mt-1">
        <v-btn size="large" prepend-icon="mdi mdi-plus" color="primary" :block="true" @click="registerPhone">เพิ่มเบอร์โทรศัพท์ใหม่</v-btn>
      </div>
    </v-col>
    <v-col cols="4">
    </v-col>
  </v-row>
  <v-dialog v-model="dialog" width="550">
    <v-card title="เบอร์โทรศัพท์ใหม่">
      <template v-slot:prepend>
        <v-icon icon="mdi mdi-phone-plus"></v-icon>
      </template>
      <template v-slot:append>
        <v-icon icon="mdi mdi-close" @click="dialog = false"></v-icon>
      </template>
      <v-card-text>
        <form-pad ref="formPadTemplate" v-model="phone">
          <template v-slot:default="{ data, rules }">
            <v-text-field
                ref="phoneNoField"
                color="primary"
                label="เบอร์โทรศัพท์ (Phone Number)"
                variant="underlined"
                :rules="[rules.telephone('\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07'), rules.require()]"
                v-model="data.phone"
                :autofocus="true"
            ></v-text-field>
          </template>
        </form-pad>
        <v-chip-group
            v-model="typePhone"
            column
            multiple
            selected-class="text-primary"
        >
          <v-chip v-for="item in listPhonesType" :key="item.id" :value="item.id"
                  filter
                  variant="outlined"
          >
            {{ item.name }}
          </v-chip>
        </v-chip-group>
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" variant="flat" @click="add" :block="true">ยืนยัน</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
