<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"
        flat
        round
        :disabled="editvisible"
        :color="editvisible ? 'grey-7' : 'primary'"
        @click="edit"
        icon="mdi-pencil-outline"
      >
        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
      </q-btn>
      <div v-else>
        <q-btn
          flat
          round
          :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>
