<template>
  <div class="project-actions">
    <a @click="toggleMenu"
       class="project-actions__more-link">
      <ellipses></ellipses>
    </a>
    <widget-popover v-if="showMenu"
                    @hide-me="showMenu = false"
                    class="project-actions__popover">
      <li class="popover-links__link"><a @click="deleteProject(id)">Projekt löschen</a></li>
      <li class="popover-links__link"><a @click="editProject(id)">Projekt bearbeiten</a></li>
      <li v-if="!final" class="popover-links__link"><a @click="updateShareState(id, true)">Projekt teilen</a></li>
      <li v-if="final" class="popover-links__link"><a @click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
      </li>
    </widget-popover>
  </div>

</template>

<script>
  import Ellipses from '@/components/icons/Ellipses.vue';
  import WidgetPopover from '@/components/WidgetPopover';

  import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
  import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';
  import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
  import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';

  export default {
    props: ['id', 'final'],

    components: {
      Ellipses,
      WidgetPopover
    },

    data() {
      return {
        showMenu: false
      }
    },

    methods: {
      toggleMenu: function () {
        this.showMenu = !this.showMenu
      },
      editProject(id) {
        this.$router.push({name: 'edit-project', params: {id}});
      },
      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});
              }
            }
          }
        }).then(() => {
          this.$router.push('/portfolio');
        });
      },
      updateShareState(id, state) {
        const project = this;
        this.$apollo.mutate({
          mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
          variables: {
            input: {
              id: this.id,
              shared: state
            }
          },
          update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
            if (!errors) {
              const query = PROJECT_QUERY;
              const variables = {
                id: project.id
              };
              const data = store.readQuery({query, variables});

              if (data) {
                data.project.final = shared;
                store.writeQuery({query, variables, data});
              }
            }
          }
        })
      }
    }
  }
</script>

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

  .project-actions {
    &__more-link {
      cursor: pointer;
    }

    &__popover {
      @include popover-defaults();
    }

    svg {
      width: 30px;
      fill: $color-charcoal-dark;
      margin-right: 15px;
    }
  }
</style>
