<template lang="pug">
.sidebar.h-full.rounded.flex.flex-col.justify-between.pt-4.px-2
  .flex.flex-col.gap-y-4
    q-btn(
      style="width: 48px; height: 48px",
      id="print",
      rounded,
      padding="0px",
      icon="print",
      text-color="blue",
      size="xl"
    )
    q-btn(
      v-if="!editMode",
      style="width: 48px; height: 48px",
      id="edit",
      rounded,
      padding="0px",
      icon="edit",
      text-color="blue",
      size="xl",
      @click="toggleEditMode",
    )
    q-btn(
      v-if="editMode",
      style="width: 48px; height: 48px",
      id="edit",
      rounded,
      padding="0px",
      icon="check",
      text-color="blue",
      size="xl"
      @click="save",
    )
    q-btn(
      v-if="editMode",
      style="width: 48px; height: 48px",
      id="edit",
      rounded,
      padding="0px",
      icon="cancel",
      text-color="blue",
      size="xl",
      @click="cancel",
    )
</template>

<script>
export default {
  name: "TheRightMenu",
  emits: ["save", "cancel", "update:editMode"],
  data() {
    return {
      editMode: false,
    };
  },
  methods: {
    toggleEditMode() {
      this.editMode = !this.editMode;
      this.$emit("update:editMode", this.editMode);
    },
    save() {
      this.toggleEditMode();
      this.$emit("save");
    },
    cancel() {
      this.toggleEditMode();
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="sass" scoped>
.sidebar
  max-width: 64px
  min-width: 64px
  background-color: var(--default-white)

.button:hover
  background-color: var(--bg-light-blue-color)
  color: var(--btn-blue-color)
  .hover :deep(path)
    fill: #9294A7
</style>
