<template>
  <q-card-actions class="text-primary q-py-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 />
    <div v-if="editData">
      <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>
      <div v-else>
        <q-btn
          unelevated
          label="บันทึก"
          :disabled="!editvisible"
          :color="!editvisible ? 'grey-7' : 'public'"
          @click="checkSave"
          
        > <!-- icon="mdi-content-save-outline"
          <q-tooltip>บันทึก</q-tooltip> -->
        </q-btn>
      </div>
    </div>
  </q-card-actions>
</template>
<script setup lang="ts">
const props = defineProps({
  editvisible: Boolean,
  next: Boolean,
  previous: Boolean,
  modalEdit: Boolean,
  editData: {
    type: Boolean,
    default: true,
  },
  clickNext: {
    type: Function,
    default: () => console.log("not function"),
  },
  clickPrevious: {
    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"),
  },
});
const emit = defineEmits([
  "update:editvisible",
  "update:next",
  "update:previous",
]);

const updateEdit = (value: Boolean) => {
  emit("update:editvisible", value);
};
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>
