<template>
  <div class="portfolio__page">
    <div class="portfolio">
      <add-project class="portfolio__add-project"></add-project>

      <project-widget
        v-for="project in projects"
        v-bind="project"
        :userId="userId"
        @delete="deleteProject"
        @updateShare="updateShareState"
        @edit="editProject"
        :key="project.id"
        class="portfolio__project"
      ></project-widget>
    </div>
  </div>
</template>

<script>
  import ProjectWidget from '@/components/portfolio/ProjectWidget';
  import AddProject from '@/components/portfolio/AddProject';

  import ME_QUERY from '@/graphql/gql/meQuery.gql';
  import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
  import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
  import UPDATE_PROJECT_MUTATION from '@/graphql/gql/mutations/updateProject.gql';

  export default {
    components: {
      ProjectWidget,
      AddProject
    },

    apollo: {
      projects: {
        query: PROJECTS_QUERY,
        update(data) {
          return this.$getRidOfEdges(data).projects
        }
      },
      me: {
        query: ME_QUERY
      }
    },

    data () {
      return {
        projects: [],
        me: {}
      }
    },

    computed: {
      userId () {
        return this.me.id;
      }
    },

    methods: {
      deleteProject(id) {
        this.$apollo.mutate({
          mutation: DELETE_PROJECT_MUTATION,
          variables: {
            input: {
              id
            }
          },
          update(store, {data: {deleteProject: {success}}}) {
            if (success) {
              const data = store.readQuery({query: PROJECTS_QUERY});

              if (data) {
                data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
                store.writeQuery({query: PROJECTS_QUERY, data});
              }
            }
          }
        })
      },
      editProject(id) {
        this.$router.push({name: 'edit-project', params: { id }});
      },
      updateShareState(id, state) {
        const project = this.projects.filter(project => project.id === id)[0];
        this.$apollo.mutate({
          mutation: UPDATE_PROJECT_MUTATION,
          variables: {
            input: {
              project: {
                id: project.id,
                title: project.title,
                description: project.description,
                appearance: project.appearance,
                objectives: project.objectives,
                final: state
              }
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .portfolio {
    display: flex;
    flex-direction: column;
    @supports (display: grid) {
      display: grid;
    }

    grid-row-gap: 30px;
    grid-auto-rows: 200px;
    max-width: 640px;
    width: auto;
    justify-self: center;
    box-sizing: border-box;
    padding: $large-spacing $medium-spacing;

    &__page {
      display: flex;
      @supports (display: grid) {
        display: grid;
      }
      align-content: center;
      justify-content: center;

      padding-top: $large-spacing;
    }

    /*IE10*/
    &__add-project {
      margin-bottom: $large-spacing;
      @supports (display: grid) {
        margin-bottom: 0;
      }
    }
  }
</style>
