<template>
  <div class="container">
    <div id="projects" ref="projects" class="card">
      <div class="card-header">
        Projects
        <div v-show="loading" class="spinner-grow spinner-grow-sm text-dark" role="status">
          <span class="sr-only">Loading...</span>
        </div>
        <button
          type="button"
          class="btn btn-success btn-sm float-right"
          data-toggle="modal"
          data-target="#addProjectModal"
        >
          <i class="fa fa-plus"></i>
        </button>
      </div>
      <div v-show="!loading" class="card-body">
        <div v-if="projects.length" class="list-group accordion" id="projects-list-accordion">
          <div class="list-group-item" v-for="project in projects" v-bind:key="project.id">
            <div class="row">
              <div class="col-sm-12">
                <span v-text="project.name"></span>
                <span class="btn-group float-right">
                  <button
                    type="button"
                    class="btn btn-success btn-sm"
                    data-toggle="modal"
                    data-target="#addTaskModal"
                    v-bind:data-project_id="project.id"
                  >
                    <i class="fa fa-plus"></i>
                  </button>
                  <button
                    class="btn btn-outline-info btn-sm"
                    data-toggle="collapse"
                    data-parent="#projects-list-accordion"
                    v-bind:data-target="'#task' + project.id"
                  >
                    <i class="fa fa-angle-down"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="collapse mt-1" v-bind:id="'task' + project.id">
              <div class="list-group list-group-flush">
                <div class="list-group-item">test</div>
                <div class="list-group-item">test</div>
                <div class="list-group-item">test</div>
              </div>
            </div>
          </div>
        </div>
        <div class="alert alert-info" v-if="!projects.length&&!loading">No projects</div>
        <simple-pagination class="mt-1" v-bind:pagination="pagination" v-on:paginate="changePage" />
      </div>
      <div v-show="0" class="card-footer"></div>
    </div>
    <add-project-modal v-on:added="onNewProject" />
    <add-task-modal v-on:added="onNewTask" />
  </div>
</template>

<script>
import AddProjectModal from "./modals/AddProjectModal.vue";
import AddTaskModal from "./modals/AddTaskModal.vue";
import SimplePagination from "./SimplePagination.vue";
import { mapState, mapActions } from "vuex";

export default {
  components: {
    "add-project-modal": AddProjectModal,
    "add-task-modal": AddTaskModal,
    "simple-pagination": SimplePagination
  },
  data: function() {
    return {
      loading: false
    };
  },
  computed: {
    ...mapState({
      projects: state => state.project.projects,
      pagination: state => state.project.pagination
    })
  },
  methods: {
    changePage(data) {
      this.loadProjects({
        page: data.page
      });
    },
    loadProjects(params) {
      if (!params) {
        params = {};
      }

      this.loading = true;

      this.$store.dispatch("project/fetchProjects", params).then(() => {
        this.loading = false;
      });
    },
    loadTasks(params) {
      if (!params) {
        params = {};
      }

      this.loading = true;

      this.$store.dispatch("task/fetchTasks", params).then(() => {
        this.loading = false;
      });
    },
    onNewProject() {
      this.loadProjects();
    },
    onNewTask() {
      this.loadTasks();
    }
  },
  created() {
    this.loadProjects();
  }
};
</script>