<template>
  <div class="q-pa-md q-gutter-sm">
    <q-banner rounded class="text-black q-btn-right"> </q-banner>
  </div>
  <q-card class="q-mr-lg" flat bordered>
    <q-card-section horizontal>
      <q-card-section>
        <div class="text-h5">Ваша личная метавселенная</div>
        <div class="text-h6">Проекты пользователя</div>
        <div class="text-subtitle2 text-grey">Создайте Ваш проект</div>
      </q-card-section>
      <div class="flex flex-center" style="margin-left: auto; padding: 20px">
        <q-btn
          @click="showCreateDialog = true"
          label="+ Создать проект"
          class=""
        />
      </div>
    </q-card-section>
    <q-separator />

    <q-card-section>
      <q-card class="" flat v-if="projectsLength === 0">
        <q-card-section> No mana </q-card-section>
      </q-card>
      <q-card class="" flat v-else>
        <q-card-section v-for="project of projects" :key="project.node.objId">
          <!-- <div class="text-h6">Our Changing Planet</div>
          <div class="text-subtitle2">by John Doe</div> -->

          <q-item
            clickable
            v-ripple
            :to="{ name: 'project', params: { uuid: project.node.uuid } }"
          >
            <q-item-section avatar>
              <q-avatar class="" icon="space_dashboard" />
            </q-item-section>
            <q-item-section>{{ project.node.nomo.enhavo }}</q-item-section>
            <q-item-section>{{ project.node.priskribo.enhavo }}</q-item-section>
            <span class="">
              <q-btn icon="more_vert" menu>
                <q-menu>
                  <q-item
                    clickable
                    @click="
                      showDeleteDialog = true;
                      deleteUuid = project.node.uuid;
                    "
                    >Удалить</q-item
                  >
                  <q-item clickable>Настройки</q-item>
                </q-menu>
              </q-btn>
            </span>
          </q-item>
        </q-card-section>
      </q-card>
    </q-card-section>
  </q-card>

  <q-dialog v-model="showDeleteDialog">
    <q-card class="my-card">
      <q-card-section class="">
        <div class="text-h6">Удалить проект</div>
        <div class="text-subtitle2">Вы уверены, что хотите удалить проект?</div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn
          outline
          label="Отмена"
          color="primary"
          @click="showDeleteDialog = false"
        />
        <q-btn
          outline
          label="Удалить"
          color="negative"
          @click="deleteProject"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-dialog v-model="showCreateDialog" max-width="5000">
    <q-card>
      <q-card-section>
        <div class="text-h6">Создание проекта</div>
        <q-input v-model="projectName" label="Название проекта" />
        <q-input v-model="projectDescription" label="Описание проекта" />
      </q-card-section>
      <q-card-actions align="right">
        <q-btn label="Отмена" @click="showCreateDialog = false" />
        <q-btn label="Создать" color="primary" @click="createProject" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useKanvasoStore } from '../stores/kanvaso.js';
import { useCurrentUserStore } from '../stores/current-user';
import { mapActions, mapState } from 'pinia';
import { debugLog } from '../utils';
export default defineComponent({
  data() {
    return {
      showCreateDialog: false,
      projectName: '',
      projectDescription: '',
      showDeleteDialog: false,
      deleteUuid: null,
    };
  },
  methods: {
    ...mapActions(useKanvasoStore, ['onGetKanvaso', 'onEditKanvaso']),
    getKanvaso() {
      this.onGetKanvaso()
        .then((res) => {
          debugLog(res);
        })
        .catch((error) => {
          debugLog(error);
        });
    },
    deleteProject() {
      this.showDeleteDialog = false;
      this.onEditKanvaso({
        uuid: this.deleteUuid,
        forigo: true,
        posedantoUzantoId: this.userId,
      })
        .then((res) => {
          debugLog('ffffff', res);
          this.deleteUuid = null;

          this.getKanvaso();
        })
        .catch((error) => {
          debugLog(error);
        });
    },
    confirmDelete() {
      return true;
    },
    createProject() {
      this.showCreateDialog = false;
      if (this.projectDescription && this.projectName) {
        this.onEditKanvaso({
          nomo: this.projectName,
          priskribo: this.projectDescription,
          posedantoUzantoId: this.userId,
        })
          .then((res) => {
            debugLog(res);

            this.projectName = '';
            this.projectDescription = '';
            //TODO: сделать изменение стейта без перезапроса бекэнда
            this.getKanvaso();
          })
          .catch((error) => {
            debugLog(error);
          });
      }
    },
  },
  computed: {
    ...mapState(useKanvasoStore, {
      projects: 'getKanvaso',
      projectsLength: 'getKanvasoLength',
    }),
    ...mapState(useCurrentUserStore, {
      userId: 'getUserId',
    }),
  },
  mounted() {
    this.getKanvaso();
  },
});
</script>

<style>
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.q-btn-outline:focus {
  outline-color: green;
}

.text-h6 {
  border-radius: 15px;
}
</style>
