<template>
  <!-- eslint-disable vue/no-v-html -->
  <div data-cy="snapshot-entry" class="snapshot-list-item">
    <router-link :to="snapshotRoute" class="snapshot-list-item__title" data-cy="snapshot-link">
      {{ snapshot.title }}
    </router-link>
    <span class="snapshot-list-item__date" v-html="meta" />
    <div class="snapshot-list-item__actions">
      <button class="icon-button" data-cy="delete-snapshot-button" v-if="snapshot.mine" @click="deleteSnapshot">
        <trash-icon class="snapshot-list-item__icon" />
      </button>
      <button class="icon-button" data-cy="rename-snapshot-button" v-if="snapshot.mine" @click="changeTitle">
        <pen-icon class="snapshot-list-item__icon" />
      </button>
      <a class="snapshot-list-item__link" v-if="snapshot.mine" @click="share">
        <template v-if="snapshot.shared">Nicht mehr teilen</template>
        <template v-else>Mit Team teilen</template>
      </a>
    </div>
  </div>
</template>

<script>
import dateformat from '@/helpers/date-format';
import { SNAPSHOT_DETAIL } from '@/router/module.names';
import SHARE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/share.gql';
import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
import gql from 'graphql-tag';
import PenIcon from '@/components/icons/PenIcon';
import TrashIcon from '@/components/icons/TrashIcon';
import { removeAtIndex } from '@/graphql/immutable-operations';

export default {
  props: {
    snapshot: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    PenIcon,
    TrashIcon,
  },

  computed: {
    meta() {
      const created = dateformat(this.snapshot.created);
      if (this.snapshot.mine) {
        return created;
      }
      return `${created} - ${this.snapshot.creator}`;
    },
    snapshotRoute() {
      return {
        name: SNAPSHOT_DETAIL,
        params: {
          id: this.snapshot.id,
        },
      };
    },
  },

  methods: {
    changeTitle() {
      this.$modal
        .open('edit-snapshot-title-wizard', { name: this.snapshot.title })
        .then((title) => {
          console.log(title);
          this.$apollo.mutate({
            mutation: UPDATE_SNAPSHOT_MUTATION,
            variables: {
              input: {
                id: this.snapshot.id,
                title: title,
              },
            },
            update(
              store,
              {
                data: {
                  updateSnapshot: { snapshot },
                },
              }
            ) {
              if (snapshot.__typename === 'SnapshotNode') {
                const { id, title } = snapshot;
                store.writeFragment({
                  id,
                  fragment: gql`
                    fragment SnapshotFragment on SnapshotNode {
                      title
                    }
                  `,
                  data: {
                    title,
                    __typename: 'SnapshotNode',
                  },
                });
              }
            },
          });
        })
        .catch();
    },
    deleteSnapshot() {
      this.$modal
        .open('confirm', {
          title: 'Snapshot löschen',
        })
        .then(() => {
          this.$apollo.mutate({
            mutation: DELETE_SNAPSHOT_MUTATION,
            variables: {
              input: {
                id: this.snapshot.id,
              },
            },
            update: (
              store,
              {
                data: {
                  deleteSnapshot: { result },
                },
              }
            ) => {
              if (result.__typename === 'Success') {
                const slug = this.$route.params.slug;
                const query = SNAPSHOTS_QUERY;
                const variables = {
                  slug,
                };
                const { module } = store.readQuery({
                  query,
                  variables,
                });
                const index = module.snapshots.findIndex((snapshot) => snapshot.id === this.snapshot.id);
                const snapshots = removeAtIndex(module.snapshots, index);

                const data = {
                  module: {
                    ...module,
                    snapshots,
                  },
                };

                store.writeQuery({
                  query,
                  variables,
                  data,
                });
              }
            },
          });
        })
        .catch(() => {});
    },
    share() {
      this.$apollo.mutate({
        mutation: SHARE_SNAPSHOT_MUTATION,
        variables: {
          input: {
            snapshot: this.snapshot.id,
            shared: !this.snapshot.shared,
          },
        },
        update(
          store,
          {
            data: {
              shareSnapshot: {
                snapshot: { id, shared },
              },
            },
          }
        ) {
          store.writeFragment({
            id,
            fragment: gql`
              fragment SnapshotFragment on SnapshotNode {
                shared
              }
            `,
            data: {
              shared,
              __typename: 'SnapshotNode',
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.snapshot-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  &__title {
    @include heading-4;
    width: 180px;
  }

  &__date {
    @include regular-text;
  }

  &__link {
    @include default-link;
    color: $color-brand;
  }

  &__icon {
    @include default-icon;
  }

  &__actions {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
}
</style>
