<template lang="html">
<button class="bt bt-normal" @click="modalGroupAddVisible = true">
    <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
        <use xlink:href="#ico-add-group"/>
    </svg>
    Zarządzaj Grupami
</button>

<button class="bt bt-normal" @click="modalAddVisible = true">
    <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
        <use xlink:href="#ico-add-record"/>
    </svg>
    Dodaj Anime
</button>

<button class="bt bt-normal" @click="ShowModalEditWindow" :disabled="editButton">
    <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
        <use xlink:href="#ico-edit-record"/>
    </svg>
    Edytuj
</button>

<button class="bt bt-danger" @click="modalDeleteVisible = true" :disabled="deleteButton">
    <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
        <use xlink:href="#ico-remove-record"/>
    </svg>
    Skasuj
</button>

<ModalAddWindow v-if="modalAddVisible" @closeModal="modalAddVisible = false"/>
<ModalEditWindow v-if="modalEditVisible" @closeModal="modalEditVisible = false" />
<ModalAddGroupWindow v-if="modalGroupAddVisible" @closeModal="modalGroupAddVisible = false" />
<ModalEditGroupWindow v-if="modalGroupEditVisible" @closeModal="modalGroupEditVisible = false" />
<ModalDeleteWindow v-if="modalDeleteVisible" @closeModal="modalDeleteVisible = false" />
</template>
<script lang="js">
import { useModeratedStore } from '@/stores/moderated';
import { ref, watch } from 'vue';

import ModalAddWindow from './modals/add.vue';
import ModalEditWindow from './modals/edit.vue';
import ModalAddGroupWindow from './modals/group.vue';
import ModalEditGroupWindow from './modals/group-edit.vue';
import ModalDeleteWindow from './modals/delete.vue';


export default{
    name: "AnimeBtSet",
    components: {
        ModalAddWindow,
        ModalEditWindow,
        ModalAddGroupWindow,
        ModalEditGroupWindow,
        ModalDeleteWindow,
    },

    data() {
    return {
        //Modale
        modalAddVisible: false,
        modalEditVisible: false,
        modalDeleteVisible: false,
        modalGroupAddVisible: false,
        modalGroupEditVisible: false,
    }
  },

  setup() {
    //Moderated
    const moderated = useModeratedStore();

    const editButton = ref(moderated.editButton);
    const deleteButton = ref(moderated.deleteButton);

    const animeEdit = ref(moderated.animeEdit);
    const groupEdit = ref(moderated.groupEdit);

    watch(
        () => moderated.editButton, (newValue) => {
            editButton.value = newValue;
        }
    );

    watch(
        () => moderated.deleteButton, (newValue) => {
            deleteButton.value = newValue;
        }
    );

    watch(
        () => moderated.animeEdit, (newValue) => {
            animeEdit.value = newValue;
        }
    );

    watch(
        () => moderated.groupEdit, (newValue) => {
            groupEdit.value = newValue;
        }
    );

    return {
        //Moderated
        editButton,
        deleteButton,

        //
        animeEdit,
        groupEdit,
    };
  },

  methods: {
    //Modal edycja
    ShowModalEditWindow() {
        this.modalEditVisible = this.animeEdit;
        this.modalGroupEditVisible = this.groupEdit;
    },
  }
};
</script>
