<template>
  <q-card-actions class="text-primary q-py-sm q-gutter-sm">
    <q-btn
      flat
      round
      icon="mdi-menu-left"
      @click="clickPrevious"
      v-if="modalEdit == true"
      :disable="previous == false"
      :color="!previous ? 'grey-7' : 'public'"
    />
    <q-btn
      flat
      round
      icon="mdi-menu-right"
      @click="clickNext"
      v-if="modalEdit == true"
      :disable="next == false"
      :color="!next ? 'grey-7' : 'public'"
    />
    <q-space />
    
    <q-btn
      v-if="!editvisible"
      outline
      :disabled="editvisible"
      :color="editvisible ? 'grey-7' : 'primary'"
      @click="edit"
      label="แก้ไขข้อมูล"
    ><!-- icon="mdi-pencil-outline"
      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
    </q-btn>
    <q-btn
      v-show="editvisible"
      flat
      :disabled="!editvisible"
      :outline="!editvisible"
      :color="!editvisible ? 'grey-7' : 'red'"
      @click="cancel()"
      label="ยกเลิกแก้ไข"
      v-if="modalEdit == true"
    > <!-- icon="mdi-undo"
      <q-tooltip>ยกเลิก</q-tooltip> -->
    </q-btn>
    <q-btn
      v-if="modalEdit == true"
      unelevated
      color="red"
      @click="clickDelete"
      label="ลบข้อมูล"
    ><!-- icon="mdi-delete"
      <q-tooltip>ลบข้อมูล</q-tooltip> -->
    </q-btn>
    <q-btn
      v-if="editvisible"
      unelevated
      label="บันทึก"
      :disabled="!editvisible"
      :color="!editvisible ? 'grey-7' : 'public'"
      @click="checkSave"
    ><!-- icon="mdi-content-save-outline"
      <q-tooltip>บันทึก</q-tooltip> -->
    </q-btn>
  </q-card-actions>
</template>
<script setup lang="ts">
const props = defineProps({
  editvisible: Boolean,
  next: Boolean,
  previous: Boolean,
  modalEdit: Boolean,
  clickNext: {
    type: Function,
    default: () => console.log("not function"),
  },
  clickPrevious: {
    type: Function,
    default: () => console.log("not function"),
  },
  cancel: {
    type: Function,
    default: () => console.log("not function"),
  },
  edit: {
    type: Function,
    default: () => console.log("not function"),
  },
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
  clickDelete: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const emit = defineEmits([
  "update:editvisible",
  "update:next",
  "update:previous",
]);

const updateEdit = (value: Boolean) => {
  emit("update:editvisible", value);
};
const cancel = async () => {
  props.cancel();
};
const clickDelete = async () => {
  props.clickDelete();
};
const edit = async () => {
  updateEdit(!props.editvisible);
  props.edit();
};
const checkSave = () => {
  props.validate();
  props.save();
};

const clickNext = async () => {
  await props.clickNext();
};

const clickPrevious = async () => {
  await props.clickPrevious();
};
</script>
