<template>
  <toggle
    :checked="module.inEditMode"
    data-cy="toggle-editing"
    :label="`${$flavor.textModule} anpassen`"
    @input="toggle"
  />
</template>

<script>
import Toggle from '@/components/ui/Toggle.vue';
// import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import { gql } from '@apollo/client/core';
import { setModuleEditMode } from '@/graphql/cache-operations';
import { matomoTrackEvent } from '@/helpers/matomo-client';

const QUERY = gql`
  query ModuleEditModeQuery($slug: String) {
    module(slug: $slug) {
      inEditMode @client
      slug
    }
  }
`;

export default {
  components: {
    Toggle,
  },

  data: () => ({
    module: {
      inEditMode: false,
    },
  }),

  computed: {
    checked() {
      return false;
    },
    slug() {
      return this.$route.params.slug;
    },
  },

  apollo: {
    module() {
      return {
        query: QUERY,
        variables: {
          slug: this.slug,
        },
      };
    },
  },

  methods: {
    toggle(newChecked) {
      setModuleEditMode(this.slug, newChecked);
      if (newChecked) {
        matomoTrackEvent('Modul Anpassen', 'Eingeschaltet', this.slug);
      } else {
        matomoTrackEvent('Modul Anpassen', 'Ausgeschaltet', this.slug);
      }
    },
  },
};
</script>
