<template lang="html">
  <div class="md-body d-flex justify-content-center align-items-center">
    <div class="md-content d-flex flex-column align-content-between">
      <div class="md-header">
        <h5>Zarządzaj Grupami</h5>
        <div class="bt-md-exit" @click="CloseModal">
          <svg width="32" height="32" fill="currentColor" class="bi bi-database-fill-add">
            <use xlink:href="#ico-cross"/>
          </svg>
        </div>
      </div>

      <div class="md-body-content-gr p-4">
        <div class="md-inp-box-content-gr">
          <label for="inp-title">Nazwa nowej grupy</label>
          <div class="md-inp-box-input-content-gr">
            <input 
              type="text" 
              class="in in-default m-1" 
              style="width: 100%; height: 36px;" 
              v-model="groupTitle"
              :maxlenght="maxGlyph"
              @input="handleInput"
              />
            <button type="button" class="bt-circle bt-accept bt-space" @click="Add" :disabled="AddBtDisabler">
              <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
                <use xlink:href="#ico-add"/>
              </svg>
            </button>
          </div>
          <div class="smol-text-content"><span class="smol-text-lenght-glyph">Pozostało: {{ LenghtGlyph }}</span></div>
        </div>
        
        <div class="md-group-list-box default-border">
          <MdGroupRow v-for="(content, index) in groupData" :key="index" :data="content" />
        </div>
        <div class="md-delete-info-span">
          <span class="md-span-item">Zaznaczone elementy: {{ LenghtElements }}</span>
        </div>
      </div>

      <div class="md-footer d-flex flex-row justify-content-end p-4">
        <button type="button" class="bt bt-normal" @click="CloseModal">Zamknij</button>
      </div>
    </div>
  </div>
</template>
<script>
import { useGroupStore } from '@/stores/group';
import { useAuterizationStore } from '@/stores/auterization';

import { ref, watch } from 'vue';

import MdGroupRow from '@/components/modals/group_row.vue';

import '@/assets/css/modal.css';

export default {
  name: 'ModalAddGroupWindow',
  components: {
    MdGroupRow,
  },
  data() {
    return {
      //Zmienna nazwy
      groupTitle: '',

      //limit literków
      maxGlyph: 64,
      minGlyph: 3,
      tmpString: '',
    }
  },

  setup() {
    const auterization = useAuterizationStore();
    const userPreference = ref(auterization.userPreference);

    const groupStore = useGroupStore();
    const groupData = ref(groupStore.data);
    const sellectList = ref(groupStore.list);

    watch (
        () => groupStore.data, (newValue) => {
            groupData.value = newValue;
        },

        () => groupStore.list, (newValue) => {
          sellectList.value = newValue;
        }
    );

    return {
      groupData, sellectList,
      userPreference, 
      GetRecords: groupStore.Get,
      AddRecord: groupStore.Add,
      EditRecord: groupStore.Edit,
      DeleteRecord: groupStore.Delete,
    }
  },

  computed: {
    LenghtGlyph() {
      return this.maxGlyph - this.groupTitle.length;
    },

    LenghtElements() {
      return this.sellectList.length;
    },

    AddBtDisabler() {
      return this.groupTitle.length >= this.minGlyph ? false : true;
    }
  },

  async mounted() {
    await this.GetGroupList()
  },

  inject: ['reloadTable'],

  methods: {
    CloseModal() {
      this.$emit('closeModal');
    },

    async GetGroupList() {
      await this.GetRecords()
    },

    async Add() {
      await this.AddRecord({name: this.groupTitle});
    },

    handleInput() {
      if (this.groupTitle.length > this.maxGlyph) {
        this.groupTitle = this.groupTitle.slice(0, this.maxGlyph);
      }
    }
  }
}
</script>